SVG图片颜色设置无效解决方法-前端

爱上你家菜包

已于 2023-08-22 17:12:23 修改

阅读量2.1w

点赞数 25

分类专栏：基础/常用文章标签： javascript html

于 2021-09-08 19:54:48 首次发布

本文链接：https://blog.csdn.net/s18813688772/article/details/120185472

版权

基础/常用专栏收录该内容

30 篇文章

订阅专栏

当需要SVG图片颜色随父元素color值变化时，可以通过在SVG标签中添加`fill=currentColor`并在path标签中删除或修改fill属性来实现。如果SVG图片自带颜色，父元素颜色设置可能无效，需要进行上述修改。具体操作包括：1. 在SVG标签中添加`fill=currentColor`；2. 删除或修改path标签中的fill属性。如此，SVG图片颜色将跟随父元素颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想让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图片最后变成红色）。