Css 使用背景数据修改SVG精灵的颜色

我正在尝试为我的网站创建一个灵活的精灵解决方案，我可以在精灵图像中拥有每个图标的一个版本，但有能力改变它'；它的颜色是动态的。我知道，如果将SVG嵌入到页面中，您可以这样做，但我不想这样做，因为我将在css/sass中将其用作背景图像。我看了下面这篇文章，这篇文章看起来很有希望，它可以像Chrome中所描述的那样工作，但也看了caniuse.com（）之后，我也意识到IE只支持base64图像数据。这防止我更改SVG数据中路径的填充颜色

我在我的项目中使用gulp，我的问题是，我是否能够转换sass文件中的类似内容：

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

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

这看起来可能是一种可能性，但我不确定它是否会起作用，因为我的图像首先是数据，而在示例中，它是一个iamge URL

找到了一个解决方案-

---

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

您在这里问什么？你试过什么吗？

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