为什么不直接使用CSS的filter属性来操作颜色:悬停或其他状态?我发现它可以将SVG图像转换为img标签。至少，它在2020年几乎得到了全面支持。在我看来这是最简单的解决办法。唯一需要注意的是，为了找到目标颜色，必须调整滤镜属性。但是你也有这个非常有用的工具。

为了扩展@gringo的答案，在其他答案中描述的Javascript方法是有效的，但需要用户下载不必要的图像文件，而且在我看来，它会膨胀你的代码。

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

如果你更喜欢一个更面向开发的选项，你可以谷歌"npm svg webfont"，并使用一个最适合你的环境的节点模块。

一旦你完成了这两个选项中的任何一个，那么你就可以很容易地通过CSS改变颜色，而且很可能，你已经在这个过程中加快了你的网站。

对于我来说，我的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);
    };
  }

因为SVG基本上是代码，所以您只需要内容。我使用PHP来获取内容，但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后，我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg { 
    fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

Opera 53.0.2907.37 Linux

我建议你选好颜色，去这支笔 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 />

如果你想要一个动态的颜色，不想使用javascript，也不想使用内联SVG，使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge

<svg>
    <use href="logo.svg" style="--color_fill: #000;"></use>
</svg>

在SVG中，将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。