所以我一直在开发一些东西,我决定使用SVG。但是,我的应用程序有多个主题,无论如何我可以改变SVG的颜色,如白色,黑色,通过CSS?我不是在考虑过滤,因为我无法应用,因此整个图像就像纯红色。举个例子,我有一个图像,svg与否,带有白色图标。但我想要一个红色图标。反正有没有这样做?我更喜欢不使用内联svg,因为它会使定制变得复杂。 如果您需要任何澄清,请通知我。提前致谢
修改 一些额外的代码:
<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />
编辑: JSFiddle:http://jsfiddle.net/MashedPotatoes/s2gs3t16/1/
答案 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/