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

Question

我将 SVG 背景图像作为数据 URL 嵌入到 CSS 文件中:

.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 , 可以使用 CSS 滤镜设置 SVG 背景图像的颜色样式。

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

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

请访问他的网站以获取更多信息和其他两个解决方案，这两个解决方案不涉及更改颜色，而是涉及 SVG 背景 Sprite 和创建覆盖背景的“倒置”SVG，并且在背景颜色闪耀的地方透明以创建彩色形式.

不幸的是，IE does not support filters .