想让svg图片的颜色跟随父元素的color值变化,可先用编辑器打开svg图片文件,修改以下2点后保存即可:
-
在svg标签中
加上
fill=”currentColor” -
在path标签中
去掉
fill=”…”,或者改为 fill=”currentColor”
拿到的svg图片如果是自带颜色的,一般父元素的颜色设置就会无效,那么就需要修改以上2点。
特别是第2点
,因为path标签中的d=”…”内容很长,而 fill=”…” 通常放在标签的末尾,
容易看漏
。
举个例子:
父元素设置red无效,因为<path>标签的最后默认设置了blue,此时该svg图片是 蓝色的
<div style="color: red">
<svg width="1em" height="1em" viewBox="0 0 1024 1024">
<path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." fill="blue"/>
</svg>
</div>
改为以下代码即可,svg图片 红色生效:
1.svg标签中加入 fill="currentColor"
2.path标签中去掉 fill="blue" (fill属性 通常在path标签的末端)
<div style="color: red">
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." />
</svg>
</div>
此后,该svg图片的颜色 则会
跟随父元素变化
(例子中 svg图片 最后变成红色)。
版权声明:本文为s18813688772原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。