图像/ SVG改变颜色?

时间:2015-10-18 05:22:02

标签: html css svg

所以我一直在开发一些东西,我决定使用SVG。但是,我的应用程序有多个主题,无论如何我可以改变SVG的颜色,如白色,黑色,通过CSS?我不是在考虑过滤,因为我无法应用,因此整个图像就像纯红色。举个例子,我有一个图像,svg与否,带有白色图标。但我想要一个红色图标。反正有没有这样做?我更喜欢不使用内联svg,因为它会使定制变得复杂。 如果您需要任何澄清,请通知我。提前致谢

修改 一些额外的代码:

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

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

2 个答案:

答案 0 :(得分:1)

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

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

如果你正在使用Angular:

您可以使用此组件 - ngReusableSvg

答案 1 :(得分:0)

您无法以动态方式更改背景SVG的颜色。但在大多数情况下,你可以使用SVG作为“面具”来改变容器的背景颜色。

clip-path: url(#clipping) http://codepen.io/yoksel/full/fsdbu/