在我正在进行的项目中，我们正在使用SVG作为图标。我们的大多数图标需要有第二个版本，其中颜色被反转（如白色背景的蓝色图标和蓝色背景的白色图标）。
我们在CSS中使用background-image包含图标。
我试图弄清楚是否有一种方法我们每个图标只能有一个文件，并使用CSS或Javascript来改变它的颜色。这样我们就可以减少请求。
现在，我知道使用CSS在内联 SVG图像上设置属性是有效的，但我真的不想内联我们得到的每个图标。
有办法做到这一点吗？
我有一个Plunker，其中SVG以三种不同的方式包含在内。内联，CSS背景和img标记。有一个CSS规则设置fill属性，并且只能命中内联SVG。还有一个小的Javascript片段，试图找到所有的圆圈并为它们着色。有趣的是，当已经通过CSS设置fill时，直接在内联SVG上设置fill不起作用。
似乎document.querySelectorAll只会找到内联的SVG，我觉得这很有意义。严格来说，其他两个不是DOM的一部分。
现在，有没有办法覆盖最后两个圈子的fill而不对circle.svg文件进行更改？是否有其他技巧可用于显示具有两种不同颜色的circle.svg文件？
答案 0 :(得分：1)
如果您想采用不同的方法来解决问题，可以使用从SVG图像生成的图标字体，并将文本颜色设置为白色，蓝色或任何其他颜色。浏览器必须支持自定义字体（@ font-face），但我认为大多数支持SVG图像的浏览器都支持此
有一些不同的服务可以让您创建自己的字体，如：http://icomoon.io/或http://fontastic.me/
作为示例：Bootstrap使用图标字体的子集作为其图标：http://getbootstrap.com/components/#glyphicons