更改通过背景图像加载的 SVG 图像的填充颜色 [重复]

Posted 2023-03-06

【中文标题】更改通过背景图像加载的 SVG 图像的填充颜色 [重复]

【英文标题】：Change fill color of SVG image loaded via background-image [duplicate]

【发布时间】：2014-02-01 06:34:19

【问题描述】：

如果我像这样通过 css background-image 加载 SVG 图像：

.icon 
  background-image: url('icon.svg');

如何更改该图标或整个图标本身内形状的填充颜色？

谢谢。

【问题讨论】：

这是不可能的。您必须将 svg 文件直接加载到文档中或使用 <object> 或 <iframe> 标签。请参阅longsonr.wordpress.com/2013/10/23/… 了解更多信息

谢谢！我的印象是我无法完成我想要的，但我需要确定。

【参考方案1】：

在 XML 编辑器中编辑它，如果您知道颜色值，只需更改它。

或者，您可以转至 THIS LINK 并进行编辑。

希望这会有所帮助。

【讨论】：

我想要完成的是将可重复使用的图标定义为黑色，并使用 css 更改它们的颜色。我想跳过用多种颜色定义相同的图标。

但它是一个 SVG，所以你不能通过 CSS 控制它的内部图稿属性。您需要有一个 SVG 编辑器来更改颜色，然后重新保存它，或者在 XML 编辑器中打开它并编辑颜色，然后保存它。 - @GoranRadulovic

这就是我所害怕的，但我希望有一种方法或技巧可以让我做我想做的事。我阅读了有关 CSS 掩码的信息，但它们不受支持，因此我无法使用它们

【参考方案2】：

或者如果你想动态尝试：

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Fiddle Here