动态改变SVG的颜色

最新推荐文章于 2025-10-24 00:15:00 发布

原创最新推荐文章于 2025-10-24 00:15:00 发布 · 2.6w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #svg

杂学专栏收录该内容

6 篇文章

订阅专栏

在页面开发中，为了实现SVG图片在hover时颜色变化，本文介绍了三种方法：1) SVG文件内设置currentColor并继承父元素颜色；2) 直接修改SVG path标签的fill属性；3) 使用CSS的filter生成彩色阴影替代SVG。由于img标签引入的SVG无法直接操作，作者选择了通过CSS阴影和overflow: hidden结合，动态调整阴影颜色来达到目的。

最近写页面，根据设计标签 hover的时候需要改变图片颜色状态，切下的图又是svg格式，使用外部引入的方式；
网上搜索发现
1、可以在svg文件中更改fill属性更改图片，将fill属性改成currentColor，然后通过继承父元素color属性可以改变颜色

<rect id="矩形" fill="#1C242C" opacity="0" x="0" y="0" width="18" height="18"></rect>
<rect id="矩形" fill="currentColor" opacity="0" x="0" y="0" width="18" height="18"></rect>

2、查看path标签内fill属性的值，要实现鼠标移入更改svg颜色，即修改fill属性值

svg:hover path{
	fill:red;
}

但是我用的是img标签引入的，好像是找不到svg的，也不太行
3、通过网上查看可以使用 css filter: drop-shadow(#fff 80px 0);通过产生一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线；
当给img添加 filter 属性后：会出现两个相距80px的图片，第二个为阴影，动态更改的就是这个阴影的颜色
在这里插入图片描述
那么我们就把实际的img移除视野就好了，我的做法是给外层div一个overflow：hidden；然后通过定位或margin-left的方法把实际图片移除，让阴影在我们所需的位置上就好了