html 中,引用的 svg 图片是否可以通关 css 控制颜色?

2022 年 9 月 3 日
 CSGO
搜索看到很多文章说这样可以:

<img src="img.svg" alt="" style="
fill: currentColor;
color: red;
">

但我试了并不行啊,比如我的一套 svg 图标都是用的黑色,现在想要在页面中以红色展现,不过这样直接添加 css 没有起到作用。
1917 次点击
所在节点    问与答
7 条回复
murmur
2022 年 9 月 3 日
要在 path 上控制 path 给他加个 id 啥的就可以改颜色了,有那种库专门搞这个的,具体忘了是啥
B3C933r4qRb1HyrL
2022 年 9 月 3 日
https://www.npmjs.com/package/hex-to-css-filter
用这个库把 hex 颜色转换为 css filter ,再用 css 的 filter 属性就可以变色了
Kaciras
2022 年 9 月 3 日
要直接用<svg>元素,不能<img>
CSGO
2022 年 9 月 5 日
@Kaciras 我现在是:
<img src="img/1.svg" alt="">
看了下菜鸟教程:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>

我应该怎么改呢?
Kaciras
2022 年 9 月 5 日
@CSGO 改 fill 属性,`text { fill: blue }`
CSGO
2022 年 9 月 5 日
@Kaciras 我的意思是 svg 标签里怎么写引用我的 img/1.svg
kongkx
2022 年 9 月 11 日
src 引入的没办法用 属性修改的方式来处理。 最多只能像 楼上说的 filter 类 修改渲染 compose 的方式来处理。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/877459

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX