如何修改SVG图像作为背景图像时的填充颜色?

将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>

当前回答

在某些(非常特定的)情况下，这可以通过使用过滤器来实现。例如，您可以通过使用过滤器将色调旋转45度将蓝色SVG图像更改为紫色:hue-rotate(45deg);。浏览器支持很少，但它仍然是一项有趣的技术。

Demo

2016-05-11 13:59:28

其他回答

现在你可以像这样在客户端实现这一点:

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+")";

小提琴!

2014-08-14 09:53:18

实现这一点的一种方法是从某种服务器端机制提供svg。只需创建一个资源服务器端，根据GET参数输出svg，并在某个url上提供它。

然后在css中使用这个url。

因为作为一个背景img，它不是DOM的一部分，你不能操作它。另一种可能是定期使用它，以正常的方式将它嵌入到页面中，但绝对定位它，使它成为一个页面的全宽和高，然后使用z-index css属性将它放在页面上所有其他DOM元素的后面。

2012-11-13 20:06:13

以文本形式下载svg。

使用javascript修改svg文本来更改绘制/描边/填充颜色[s]。

然后将修改后的svg字符串内联嵌入到您的css中。

2013-11-24 16:07:08

如果你试图使用和SVG直接在CSS与url()像这样;

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

您应该将#编码为%23，否则它将不起作用。

<svg fill="%23FFF" ...

2021-08-15 01:05:03

SCSS创建函数

@function url-svg($icon) {
  @return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}

scss使用

url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')

css生成

url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')

str-replace函数从bootstrap开始使用。

2021-10-21 07:33:02

如何修改SVG图像作为背景图像时的填充颜色?

推荐文章

最新文章

标签