Question

如果我通过css background-image加载SVG图像，如下所示：

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

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

感谢。

Answer 1

或者，如果您想动态尝试：

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"  width="320px" height="100px" 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

Answer 2

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

或者，您可以转到 THIS LINK 进行修改。

希望这有帮助。

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

2 个答案: