需求如下圖，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;