通过css改变svgimg的颜⾊
需求如下图，hover的时候改变图标颜⾊，图标为引⼊的svg img
⼀般的解决办法有：1.字体图标改变css的color属性；2.js在hover事件中切换图⽚；3.⽼⼀点的⽅案是hover切换背景？
但是为了更⼩的开销，⼀般css为更好的解决⽅案，svg的颜⾊是在标签内通过fill属性写死的，所以⽤到了使⽤了CSS3滤镜filter中的drop-shadow。
代码如下：
<section>
<div className={styles.image}>
<img src={item.icon} alt="Advantage" />
</div>
<p>{item.line1}</p>
<p>{item.line2}</p>
</section>
section{
.image{
display: inline-block;
overflow: hidden;
}
img{
position: relative;
svg图left: 0;
margin-bottom: .1rem;
filter: drop-shadow(#ffffff 80px 0);
}
&:hover{
background-color: gray;
img{
left: -80px;
}
}
}
drop-shadow(h-shadow v-shadow blur spread color)：给图像设置⼀个阴影效果。其中<offset-x> <offset-y>分别设置阴影的偏移量，且必填。具体可以查看w3c的标准
主要的实现原理就是设置需要的阴影效果，并隐藏，hover时切换显⽰就好

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。