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

2022-09-03 15:19:47 +08:00
 CSGO
搜索看到很多文章说这样可以:

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

但我试了并不行啊,比如我的一套 svg 图标都是用的黑色,现在想要在页面中以红色展现,不过这样直接添加 css 没有起到作用。
1014 次点击
所在节点    问与答
7 条回复
murmur
2022-09-03 15:30:08 +08:00
要在 path 上控制 path 给他加个 id 啥的就可以改颜色了,有那种库专门搞这个的,具体忘了是啥
cuvii
2022-09-03 15:34:43 +08:00
https://www.npmjs.com/package/hex-to-css-filter
用这个库把 hex 颜色转换为 css filter ,再用 css 的 filter 属性就可以变色了
Kaciras
2022-09-03 18:10:45 +08:00
要直接用<svg>元素,不能<img>
CSGO
2022-09-05 15:51:47 +08:00
@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-09-05 17:58:56 +08:00
@CSGO 改 fill 属性,`text { fill: blue }`
CSGO
2022-09-05 18:13:19 +08:00
@Kaciras 我的意思是 svg 标签里怎么写引用我的 img/1.svg
kongkx
2022-09-11 08:04:36 +08:00
src 引入的没办法用 属性修改的方式来处理。 最多只能像 楼上说的 filter 类 修改渲染 compose 的方式来处理。

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

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

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

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

© 2021 V2EX