詳解如何愉快的在微信小程序中使用SVG圖標

Posted on by

SVG近幾年因各種優勢被大量的應用，遺憾的是到目前為止微信小程序並不支持以XML的形式使用SVG，這使得SVG的靈活性大大下降，大多數人選擇放棄在微信小程序中使用SVG圖標方案。
那麼，真的就沒有辦法在微信小程序中愉快的使用SVG圖標瞭嗎？我們先來分析一下，對於使用SVG圖標我們有哪些需求：

  • 能夠引入使用
  • 能夠調整顏色

首先第一點是沒有問題的，微信小程序支持以Image.src的形式引入SVG。接下來就是本文的重點部分瞭，如何讓使Image形式的SVG可以改變顏色。

在最近對CSS的學習中，我發現有個屬性可以可以使DOM的非透明部分投下一個陰影，這個屬性就是drop-shadow，屬性的值與box-shadow大致相近。通過這個屬性，我們就可以為SVG圖片投下個可以修改顏色的陰影，然後我們再將原來的部分隱藏掉就可以實現一個可以修改顏色的SVG圖標瞭。

接下來我們來實踐一下，首先構造好DOM結構： 

<view class="svg_icon">
 <image class="svg_icon-inner" src="/path/icon.svg"/>
</view>

接下來添加CSS： 

.svg_icon {
 display: inline-flex;
 width: 1em;
 height: 1em;
 overflow: hidden;
}

.svg_icon-inner {
 width: 1em;
 height: 1em;
 transform: translateY(-1em);
 filter: drop-shadow(0 1em 0 currentColor);
}

我來解釋一下為什麼要這麼設置DOM結構和CSS：首先svg_icon是整個圖標的容器，負責設置圖標的大小（1em=父容器字體的大小），和隱藏多餘的部分（即圖標的原始部分），而svg_icon-inner則負責渲染SVG，並投下有顏色的陰影，通過給svg_icon-inner設置一個與父容器相同的寬高並給其設置一個投影反方向的偏移則可以實現改變SVG顏色的需求（將投影的顏色設置為currentColor可以使得圖標的顏色隨著父容器的字體顏色改變）。

這個方案有個缺點，如果頁面中有transform的動畫並觸發時，圖標就會發生閃爍，具體的原因我也不太清楚，希望有大佬能夠指教一下。

到此這篇關於詳解如何愉快的在微信小程序中使用SVG圖標的文章就介紹到這瞭,更多相關小程序使用SVG圖標內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：