我正在使用SVG精灵创建一个图标系统。我使用gulp-svg精灵来生成精灵，并使用symbol选项，因此在调用每个svg时，我可以使用以下简单的东西：
<svg class="icon"><use xlink:href="sprite/svg/symbols.svg#icon-alert"></use></svg>
有了fill: currentColor，我还可以控制每个图标的颜色，这也很棒。
当我需要使用这些图标作为背景元素时，问题就来了。我知道您不能使用xlink:href从精灵中获取特定的图标，在需要时只获取单个SVG也可以，但当我需要更改作为背景图像引用的SVG的填充/颜色时，问题就来了。
像-webkit-background-clip: text;这样的东西非常适合应用不同的背景和基于文本的剪切，但我需要一个可以根据需要切换的纯色覆盖。
有没有一个简单的SVG过滤器我可以附加到这个背景上（被引用为SVG），我可以把它固定在上面？如果有任何帮助，我将不胜感激。谢谢
更新
下面是一个工作示例。但是，我正在寻找一些也可以在IE9中工作的东西，这就是为什么我希望其他东西。
使用我编写的LESS函数写了一篇文章，该函数在使用LESS引入SVG对象后对其进行编辑http://zslabs.com/articles/svg-background-fill
您可以应用过滤器来更改整个元素（包括背景）的颜色，但在大多数情况下，您无法根据需要选择性地将其仅应用于背景。如果你在网上有一个确切的例子，里面有你试图涵盖的确切案例-可能有一些非常具体的解决方案来解决你的确切案例（例如，如果你的前景都是黑色的，那么颜色矩阵过滤器可能会起作用。）