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

您可以應用濾鏡來更改整個元素的顏色（包括背景） - 但在大多數情況下，您無法將其選擇性地僅應用於背景。如果你有一個確切的例子，你需要覆蓋的確切案例 - 可能有一些非常具體的解決方案爲你的確切情況（例如，如果你的前景都是黑色的，那麼一個顏色矩陣過濾器可能工作。 ））