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

更新時間：2021年03月07日 14:28:44 作者：O_o

這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

能夠引入使用
能夠調(diào)整顏色

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

在最近對CSS的學習中，我發(fā)現(xiàn)有個屬性可以可以使DOM的非透明部分投下一個陰影，這個屬性就是drop-shadow，屬性的值與box-shadow大致相近。通過這個屬性，我們就可以為SVG圖片投下個可以修改顏色的陰影，然后我們再將原來的部分隱藏掉就可以實現(xiàn)一個可以修改顏色的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設置一個與父容器相同的寬高并給其設置一個投影反方向的偏移則可以實現(xiàn)改變SVG顏色的需求（將投影的顏色設置為currentColor可以使得圖標的顏色隨著父容器的字體顏色改變）。

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

到此這篇關于詳解如何愉快的在微信小程序中使用SVG圖標的文章就介紹到這了,更多相關小程序使用SVG圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: