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

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

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

在最近對CSS的學(xué)習(xí)中，我發(fā)現(xiàn)有個屬性可以可以使DOM的非透明部分投下一個陰影，這個屬性就是drop-shadow，屬性的值與box-shadow大致相近。通過這個屬性，我們就可以為SVG圖片投下個可以修改顏色的陰影，然后我們再將原來的部分隱藏掉就可以實現(xiàn)一個可以修改顏色的SVG圖標(biāo)了。

接下來我們來實踐一下，首先構(gòu)造好DOM結(jié)構(gòu)：

<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);
}

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

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

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

最新評論