通過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;