需求如下圖，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時切換顯示就好，簡單，但是之前沒怎麼了解到