更改数据网址的颜色嵌入SVG图像 [英] Change color of data url embedded SVG image

问题描述

我有一个嵌入CSS文件中的SVG背景图片作为数据网址：

I have an SVG background image embedded in a CSS file as a data url:

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

$ b b

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

I want another element to have the same background image, only in a different color, but I don't want to repeat the whole SVG code.

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

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

不要使用Javascript。

So how do I change the color of a background SVG image?

No Javascript, please.

没有其他相关问题回答这个问题，因为解决方案

None of the other related questions answered this, because the solutions given there rely on serving two different files, which I want to avoid because I want to minimize file size for mobile users.

推荐答案

这是因为我想避免使用两个不同的文件，因为我想避免移动用户的文件大小。显然，如 Noah Blon解释，可以为颜色设置样式使用CCS过滤器的SVG背景图片。

Apparently, as Noah Blon explains, it is possible to style the color of an SVG background image using CCS filters.

他在其网站上提供的示例是：

An example he gives on his site is:

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

请访问他的网站了解更多信息，颜色，但SVG背景精灵，并创建一个倒置的SVG覆盖背景和透明的背景颜色照耀通过创建一个有色的形式。

Please visit his site for more information and two other solutions that do not involve changing the color but SVG background sprites and creating an "inverted" SVG that covers the background and is transparent where the background color shines through to create a colored form.

不幸的是， a href =http://caniuse.com/#search=filter =nofollow> IE不支持过滤器。

Unfortunately, IE does not support filters.

这篇关于更改数据网址的颜色嵌入SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！