如何修改SVG图片作为背景图片的填充颜色？
如何修改SVG图片作为背景图片的填充颜色？
提问于 2012-11-14 04:02:44
将SVG输出直接内联到页面代码中，我可以简单地使用CSS修改填充颜色，如下所示：
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}这很有效，但是我正在寻找一种方法来修改SVG的"fill“属性，当它被用作背景图像时。
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>回答 18
Stack Overflow用户
发布于 2017-10-24 15:49:48
您可以使用CSS掩码，通过' mask‘属性，您可以创建一个应用于元素的掩码。
.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
Stack Overflow用户
发布于 2012-11-14 04:06:14
要做到这一点，一种方法是通过某种服务器端机制为svg提供服务。只需创建一个资源服务器端，根据GET参数输出您的svg，然后在某个url上为其提供服务。
然后你只需要在你的css中使用这个url。
因为作为背景img，它不是DOM的一部分，您不能操作它。另一种可能是定期使用它，以常规方式将其嵌入到页面中，但绝对定位它，使其达到页面的整个宽度和高度，然后使用z-index css属性将其放在页面上所有其他DOM元素的后面。
Stack Overflow用户
发布于 2015-08-04 07:28:06
另一种方法是使用掩码。然后更改被遮罩元素的背景色。这与更改svg的fill属性具有相同的效果。
HTML：
<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>CSS：
glyph {
display: inline-block;
width: 24px;
height: 24px;
}
glyph.star {
-webkit-mask: url(star.svg) no-repeat 100% 100%;
mask: url(star.svg) no-repeat 100% 100%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: yellow;
}
glyph.heart {
-webkit-mask: url(heart.svg) no-repeat 100% 100%;
mask: url(heart.svg) no-repeat 100% 100%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: red;
}你可以在这里找到完整的教程：http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (不是我自己的)。它提出了各种方法(不限于掩码)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13367868
复制相关文章
相似问题
腾讯云开发者
