javascript - 使用 CSS 或 Javascript 动态设置(非内联)SVG 样式

Question

在我参与的元素中，我们使用 SVG 作为图标。我们的大多数图标都需要颜色反转的第二个版本(如白色背景的蓝色图标和蓝色背景的白色图标)。

我们在 CSS 中使用 background-image 包含图标。

我想弄清楚是否有一种方法可以让每个图标只有一个文件，并使用 CSS 或 Javascript 来更改它的颜色。这样我们就可以减少请求。

现在，我知道使用 CSS 在 内联 SVG 图像上设置属性是可行的，但我真的不想内联我们现有的每个图标。

有办法吗？

我有一个 Plunker其中 SVG 以三种不同的方式包含。内联、CSS 背景和 img 标签。有一个 CSS 规则设置了 fill 属性并且只命中内联 SVG。还有一个小的 Javascript 片段试图找到所有的圆圈并为它们着色。有趣的是，当 fill 已经通过 CSS 设置时，直接在内联 SVG 上设置 fill 不起作用。

document.querySelectorAll 似乎只会找到内联 SVG，我想这是有道理的。其他两个严格来说不是 DOM 的一部分。

现在，有什么方法可以覆盖最后两个圆圈的 fill 而无需更改 circle.svg 文件？我可以使用其他技巧来显示具有两种不同颜色的 circle.svg 文件吗？

Answer 1

如果您想采用不同的方法来解决您的问题，您可以使用从 SVG 图像生成的图标字体，并将文本颜色设置为白色、蓝色或任何其他颜色。浏览器必须支持自定义字体(@font-face)，但我认为大多数支持 SVG 图像的浏览器都会支持这个

有一些不同的服务可以让您创建自己的字体，例如:http://icomoon.io/或 http://fontastic.me/

例如:Bootstrap 为其图标使用图标字体的子集:http://getbootstrap.com/components/#glyphicons