通过css改变svg img的颜色

 需求如下图，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;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);　　　　
　　　　 border-left: 30px solid transparent;
　　　　 border-right: 30px solid transparent;

} &:hover{ background-color: gray; img{ left: -80px; } } }

drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。其中<offset-x> <offset-y>分别设置阴影的偏移量，且必填。具体可以查看w3c的标准

 主要的实现原理就是设置需要的阴影效果，并隐藏，hover时切换显示就好。

但是发现，在safari浏览器中，图片主体隐藏后，阴影也消失了，查看filter的兼容发现safari其实是支持这个属性的，所以给原图片加上了透明边框

border-left: 30px solid transparent;//防止drop-shadow主体超出视线隐藏后阴影消失
border-right: 30px solid transparent;