html - 图像/SVG 改变颜色?

标签 html css svg


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

编辑: 一些额外的代码:

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

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

最佳答案

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

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

如果您使用的是 Angular:

您可以使用此组件 - ngReusableSvg .

关于html - 图像/SVG 改变颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33194600/

相关文章:

javascript - JS在嵌入中获取svg对象

javascript - Web 开发 : localStorage vs. 缓存 HTTP

javascript - 在 HTML 页面之间传输数据似乎不起作用?

php - 创建一个将忽略第一个目录的 url

html - 如何链接到页面的特定部分(在 Safari 中有效)

css - Mapbox GL JS - 样式按钮

html - 如何使水平导航栏居中

html - css中的边框样式结束

javascript - D3.js - 文本未显示在节点中

javascript - SVG 三 Angular 形的插值填充