SVG上的颜色覆盖作为背景

Question

我正在使用SVG sprite来创建图标系统。我使用gulp-svg-sprites生成精灵和使用symbol选项是这么调用每个SVG的时候，我可以用的东西一样简单：

<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg> 

随着fill: currentColor我能够同时控制每个图标的颜色，这又是伟大的。

当我需要使用这些图标作为背景元素时，问题就出现了。我知道你不能使用xlink:href从sprite获取一个特定的图标 - 我可以在需要的时候抓住单个SVG，但是当我需要改变被引用的SVG的填充/颜色时，问题就出现了作为背景图像。

像-webkit-background-clip: text;这样的东西很适合应用不同的背景并基于文本切断，但我需要一个可根据需要切换的纯色覆盖。

是否有一个简单的SVG过滤器可以附加到这个背景上（引用为SVG），我可以将其粘贴到此？将不胜感激任何帮助。谢谢！

更新

Here is a working example。但是，我正在寻找一些可以在IE9中工作的东西，这就是为什么我希望有其他东西。

Answer 1

写使用LESS功能我写的编辑SVG对象一旦其拉入较少的http://zslabs.com/articles/svg-background-fill

Answer 2

您可以应用滤镜来更改整个元素的颜色（包括背景） - 但在大多数情况下，您无法将其选择性地仅应用于背景。如果你有一个确切的例子，你需要覆盖的确切案例 - 可能有一些非常具体的解决方案为你的确切情况（例如，如果你的前景都是黑色的，那么一个颜色矩阵过滤器可能工作。 ））