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

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

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

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

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

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

接下來(lái)添加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);
}

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

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

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

最新評(píng)論