我正在尝试为我的网站创建灵活的精灵解决方案，我可以在精灵图像中拥有每个图标的一个版本，但能够动态地更改它的颜色。我知道你可以这样做，如果你将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。
答案 0 :(得分：0)
找到解决方案 - https://www.npmjs.com/package/gulp-css-str2base64。
这允许我将我的SVG数据字符串包装在str2base64函数中，然后转换它。我在执行sass任务后运行此任务，以确保在编码数据之前已应用变量。