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

【问题标题】：Change color of data url embedded SVG image更改数据 url 嵌入 SVG 图像的颜色
【发布时间】：2015-07-19 10:33:09
【问题描述】：

我在 CSS 文件中嵌入了一个 SVG 背景图像作为数据 url：

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

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

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

请不要使用 Javascript。

其他相关问题都没有回答这个问题，因为那里给出的解决方案依赖于提供两个不同的文件，我想避免这种情况，因为我想最小化移动用户的文件大小。

【问题讨论】：

标签： css svg

【解决方案1】：

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

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

.kiwi {
    fill: #94d31b; 
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

它不适用于 IE。但是，只要今天的 IE 远不那么重要，就可以使用 pngs 来为这种自定义情况创建一个后备方案。（是的，这是一些额外的步骤，但我宁愿在我的项目中使用它）。
应该注意这个解决方案在技术上并没有“设置 SVG 的颜色样式”。无论内容是什么（SVG 与否），它都是对整个 DOM 元素的直接过滤器。