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

当前回答

下面是另一种解决方案,使用渐变和单色图标作为背景和背景混合模式来着色图标。 它要求背景色是白色的,否则整个背景都会上色。我只在Chrome上进行了测试。

.colored-background { background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-color: #fff; background-blend-mode: lighten, normal; background-repeat: no-repeat; background-position: center, center right .8em; background-size: auto, 0.6em; color: red; display: inline-flex; align-items: center; padding: 0.5em; padding-right: 2em; height: 1.6em; width: auto; border: 1px solid gray; } .bg { background-color: #ddd; padding: 1em; } <div class="bg"> <div class="colored-background">green icon from black svg</div> </div>

其他回答

很多if,但如果你的前base64编码SVG开始:

<svg fill="#000000

然后base64编码的字符串将开始:

PHN2ZyBmaWxsPSIjMDAwMDAw

如果预先编码的字符串开始:

<svg fill="#bfa76e

然后编码为:

PHN2ZyBmaWxsPSIjYmZhNzZl

两个编码字符串的开头相同:

PHN2ZyBmaWxsPSIj

base64编码的怪癖是每3个输入字符变成4个输出字符。有了这样的SVG, 6个字符的十六进制填充颜色就恰好开始于编码块的“边界”。 因此,你可以轻松地做一个跨浏览器的JS替换:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

但是tnt火箭的答案是前进的方向。

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

然后在css中使用这个url。

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

使用暗色滤镜以及色调旋转、亮度和饱和度来创建任何我们想要的颜色。

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

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开始使用。

下面是另一种解决方案,使用渐变和单色图标作为背景和背景混合模式来着色图标。 它要求背景色是白色的,否则整个背景都会上色。我只在Chrome上进行了测试。

.colored-background { background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-color: #fff; background-blend-mode: lighten, normal; background-repeat: no-repeat; background-position: center, center right .8em; background-size: auto, 0.6em; color: red; display: inline-flex; align-items: center; padding: 0.5em; padding-right: 2em; height: 1.6em; width: auto; border: 1px solid gray; } .bg { background-color: #ddd; padding: 1em; } <div class="bg"> <div class="colored-background">green icon from black svg</div> </div>