更改数据url嵌入SVG图像的颜色

Question

我将CSS文件中嵌入的SVG背景图像作为数据网址：

.what { background: url('data: image/svg+xml; utf8, <svg> ... </svg') }

我希望其他元素具有相同的背景图像，只有不同的颜色，但我不想重复整个SVG代码。

<div class="what one">...</div>
<div class="what two">...</div>

那么如何更改背景SVG图像的颜色？

请不要使用Javascript。

其他相关问题都没有解决这个问题，因为那里提供的解决方案依赖于提供两个不同的文件，我想避免这些文件，因为我想尽量减少移动用户的文件大小。

Answer 1

显然，作为Noah Blon explains，可以使用CCS过滤器设置SVG背景图像的颜色样式。

他在他的网站上给出的一个例子是：

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

请访问他的网站以获取更多信息和其他两个解决方案，这些解决方案不涉及更改颜色，但SVG背景精灵和创建覆盖背景的“倒置”SVG，并且在背景颜色透过的地方透明以创建彩色表单

不幸的是，IE does not support filters。

Answer 2

您无法使用CSS重新设置背景图像的内容。它是外部SVG，还是作为数据URI应用的无关紧要。

Answer 3

查看此网页：https://css-tricks.com/using-svg/ 在页面的下方是一个名为“现在你可以用CSS控制！”的标题。 它们似乎是用诸如

之类的语句内联地改变图像的颜色

.kiwi {
    fill: #94d31b; 
}