html - 图像/SVG 改变颜色？

Question

---

所以我一直在开发一些东西，我决定使用 SVG。但是，我的应用程序有多个主题，无论如何我可以通过 css 将 SVG 的颜色从白色更改为黑色吗？我不是在看过滤，因为我不能应用所以整个图像就像纯红色。例如，我有一个带有白色图标的图像，无论是否为 svg。但我想要一个红色图标。有没有办法做到这一点？我宁愿不使用内联 svg，因为它会使定制变得复杂。如果您需要任何说明，请通知我。提前致谢

编辑:一些额外的代码:

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />

编辑: JSFiddle:http://jsfiddle.net/MashedPotatoes/s2gs3t16/1/

Answer 1

我实际上在几个月前遇到了同样的问题。我最终写了一些东西，为我提供了我们都在寻找的东西——使用相同的 SVG 并使用 CSS 来改变它的颜色。这个想法是你通过 <object> 创建它然后对其内容进行一些 DOM 操作以将其替换为 <div>从而提供对内容的访问。

我写了一篇关于这个过程的小帖子 here - 你可以看到解决方案并拿走你需要的东西。此外 - 该代码是 AngularJS 中的指令，因此它可能不适合您，但想法是一样的，您可以在 Javascript/Jquery 中使用它。

如果您使用的是 Angular:

您可以使用此组件 - ngReusableSvg .