css - 使用背景数据修改 SVG Sprite 的颜色

Question

我正在尝试为我的网站创建一个灵活的 sprite 解决方案，这样我就可以在 sprite 图像中拥有每个图标的一个版本，但能够动态更改它的颜色。我知道如果将 SVG 嵌入到页面中就可以做到这一点，但我不想这样做，因为我将把它用作 css/sass 中的背景图像。我看过以下看起来很有前途的文章，并按照 Chrome 中的描述工作，但也看过 caniuse.com ( http://caniuse.com/#search=URI ) 我也意识到 IE 只支持 base64 图像数据。这可以防止我更改 SVG 数据中路径的填充颜色。

Modify SVG fill color when being served as Background-Image

我在我的元素中使用 gulp，我的问题是，我能否转换像这样的东西，它会在我的 sass 文件中:

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

像这样用 gulp 转换成 base64 版本？

background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uP...');

这将使我能够在我的 sass 中使用变量等动态更改颜色，但也有 IE 支持。

这看起来有可能，但我不确定它是否可行，因为我的图像是开始的数据，而在示例中，它是一个 iamge URL。

http://stefanimhoff.de/2014/gulp-tutorial-7-base64/

Answer 1

找到解决方案 - https://www.npmjs.com/package/gulp-css-str2base64 .

这允许我将我的 SVG 数据字符串包装在 str2base64 函数中，然后将其转换。我在 sass 任务之后运行此任务，以确保在数据编码之前应用了变量。