html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。


当前回答

这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG,而不是使用img标记。

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

现在呈现文件时,您将得到完整的内联SVG

其他回答

如果你只是在真实颜色和黑白之间切换图像,你可以设置一个选择器为:

{过滤器:没有;}

另一个是:

{filter:grayscale(100%);}

如果你的目标只是改变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>

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

我只想改变特定的路径和/或颜色,甚至不同的路径上色。此外,在我的情况下,一些CSS被应用到img标签直接,因此我想让它是原始的img元素,而不是混乱的定位和对齐。

感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589,这对我来说很有效:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;

fetch(imgURL)
  .then(response => response.text())
  .then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, 'text/xml');
    let svg = xmlDoc.getElementsByTagName('svg')[0];
    let paths = xmlDoc.getElementsByTagName('path');

    // access individual path elements directly
    let leftShape = paths[0];
    leftShape.setAttribute('fill', '#4F4F4F');

    // or find specific color
    const pathsArr = Array.from(paths);
    let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
    skirtShape.setAttribute('fill', '#0078D6');

    // Replace old SVG with colorized SVG
    // positioning and alignment is left untouched
    let base64Str = btoa(new XMLSerializer().serializeToString(svg));
    img.src = 'data:image/svg+xml;base64, ' + base64Str;
  });

这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG,而不是使用img标记。

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

现在呈现文件时,您将得到完整的内联SVG

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