最近写页面,根据设计标签 hover的时候需要改变图片颜色状态,切下的图又是svg格式,使用外部引入的方式;
网上搜索发现
1、可以在svg文件中更改fill属性更改图片,但是就不能动态更改了呀;除非使用内敛方式,但是页面中展示svg内容感觉不是很好;
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的方法把实际图片移除,让阴影在我们所需的位置上就好了