通過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);
      }
      &:hover{
        background-color: gray;
        img{
          left: -80px;
        }
      } 
}

drop-shadow(h-shadow v-shadow blur spread color)：給圖像設置一個陰影效果。其中<offset-x> <offset-y>分別設置陰影的偏移量，且必填。具體可以查看w3c的標準

 主要的實現原理就是設置需要的陰影效果，並隱藏，hover時切換顯示就好，簡單，但是之前沒怎麼瞭解到