简单. .

你可以使用下面的代码:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

首先指定svg的路径，然后写入它的ID，在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。

在css中:

.logo {
  fill: red;
}

我建议你选好颜色，去这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为css过滤器，例如:#64D7D6

平等的

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

最后一个片段

.filterit { 宽度:270 px; 滤镜:反转(88%)棕褐色(21%)饱和(935%)色调旋转(123deg)亮度(85%)对比度(97%); ｝ < img src = " https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg " 类= " filterit />

使用滤镜转换为任何颜色。

我最近发现了这个解决方案，希望有人能使用它。 由于该解决方案使用过滤器，它可以用于任何类型的图像。不仅仅是svg。

如果你有一张单色图像，你只是想改变它的颜色，你可以在一些滤镜的帮助下做到这一点。当然，它也适用于多色图像，但你不能针对特定的颜色。只有整个图像。

过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本 如果您想将白色更改为任何颜色，您可以在每个过滤器中调整反转值。

.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>

在代码编辑器中打开SVG图标，并在path标记后添加一个类:

<path class'colorToChange' ...

你可以向svg添加class，并像这样改变颜色:

codepen

对于我来说，我的svg在使用img和svg时看起来有所不同。所以我的解决方案将img转换为csv，在内部更改样式并返回img(尽管它需要更多的工作)，我相信“blob”也有更好的兼容性比upvotes使用“掩码”的答案。

  let img = yourimgs[0];
  if (img.src.includes(".svg")) {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", img.src, true);
    ajax.send();
    ajax.onload = function (e) {
     
      svg = e.target.responseText;

     
      svgText = "";
      //change your svg-string as youd like, for example
      // replacing the hex color between "{fill:" and ";"
      idx = svg.indexOf("{fill:");
      substr = svg.substr(idx + 6);
      str1 = svg.substr(0, idx + 6);
      str2 = substr.substr(substr.indexOf(";"));
      svgText = str1 + "#ff0000" + str2;
      

      let blob = new Blob([svgText], { type: "image/svg+xml" });
      let url = URL.createObjectURL(blob);
      let image = document.createElement("img");
      image.src = url;
      image.addEventListener("load", () => URL.revokeObjectURL(url), {
        once: true,
      });
      img.replaceWith(image);
    };
  }

如果你的形状总是一种纯色，而且你有两个以上的纯色，你可以使用Fontello，用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例，这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何，如果你没有听说过Fontello，你需要去了解一下。如果你知道一个类似的更好的解决方案，我很想知道。

可能的失败:

众所周知，图标/形状字体会干扰屏幕阅读器，所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔，在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组，只使用单一的非嵌套复合形状。