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

This topic created in 1351 days ago, the information mentioned may be changed or developed.

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

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

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

svg

CSS

img

fill

7 replies • 2022-09-11 08:04:36 +08:00

murmur

Sep 3, 2022

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

B3C933r4qRb1HyrL

Sep 3, 2022

https://www.npmjs.com/package/hex-to-css-filter
用这个库把 hex 颜色转换为 css filter ，再用 css 的 filter 属性就可以变色了

Kaciras

Sep 3, 2022

要直接用<svg>元素，不能<img>

CSGO

Sep 5, 2022

@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

Sep 5, 2022

@CSGO 改 fill 属性，`text { fill: blue }`

CSGO

Sep 5, 2022 via Android

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

kongkx

Sep 11, 2022 via iPhone

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