将 SVG 输出直接与页面代码内联放置，我可以像这样使用 CSS 简单地修改填充颜色:
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}
这很好用，但是我正在寻找一种方法来修改 SVG 用作背景图像时的“填充”属性。
html {
background-image: url(../img/bg.svg);
}
现在如何更改颜色？有可能吗？
作为引用，这里是我的外部 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="#3CB54A" 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="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>
最佳答案
您可以使用 CSS 掩码，通过“掩码”属性，您可以创建一个应用于元素的掩码。
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
有关更多信息，请参阅这篇精彩文章:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
关于html - SVG图像作为背景图像时如何修改填充颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56110169/