对于我来说，我的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 class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

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

在css中:

.logo {
  fill: red;
}

如果你的目标只是改变logo的颜色，你不一定需要使用CSS，那么不要使用javascript或jquery，因为之前的一些回答建议。

要精确地回答最初的问题，只需:

在文本编辑器中打开logo.svg。 寻找fill: #fff并将其替换为fill: #000

例如，你的logo.svg在文本编辑器中打开时可能是这样的:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

．.． 只需更改填充并保存。

来自@Praveen的答案是可靠的。

我不能让它在我的工作中响应，所以我为它做了一个jquery悬停函数。

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

尝试纯CSS:

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息请参见本文https://blog.union.io/code/2017/08/10/img-svg-fill/

因为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