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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 815 天前的主题，其中的信息可能已经有所发展或是发生改变。

搜索看到很多文章说这样可以：

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

但我试了并不行啊，比如我的一套 svg 图标都是用的黑色，现在想要在页面中以红色展现，不过这样直接添加 css 没有起到作用。

7 条回复 • 2022-09-11 08:04:36 +08:00

murmur

2022-09-03 15:30:08 +08:00

要在 path 上控制 path 给他加个 id 啥的就可以改颜色了，有那种库专门搞这个的，具体忘了是啥

B3C933r4qRb1HyrL

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 via Android

@Kaciras 我的意思是 svg 标签里怎么写引用我的 img/1.svg

kongkx

2022-09-11 08:04:36 +08:00 via iPhone

src 引入的没办法用属性修改的方式来处理。最多只能像楼上说的 filter 类修改渲染 compose 的方式来处理。