SVG近幾年因各種優(yōu)勢被大量的應(yīng)用，遺憾的是到目前為止微信小程序并不支持以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圖標了。
接下來我們來實踐一下，首先構(gòu)造好DOM結(jié)構(gòu)：
|
1
2
3
|
<view class="svg_icon"> <image class="svg_icon-inner" src="/path/icon.svg"/></view> |
接下來添加CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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是整個圖標的容器，負責設(shè)置圖標的大小（1em=父容器字體的大?。碗[藏多余的部分（即圖標的原始部分），而svg_icon-inner則負責渲染SVG，并投下有顏色的陰影，通過給svg_icon-inner設(shè)置一個與父容器相同的寬高并給其設(shè)置一個投影反方向的偏移則可以實現(xiàn)改變SVG顏色的需求（將投影的顏色設(shè)置為currentColor可以使得圖標的顏色隨著父容器的字體顏色改變）。
這個方案有個缺點，如果頁面中有transform的動畫并觸發(fā)時，圖標就會發(fā)生閃爍，具體的原因我也不太清楚，希望有大佬能夠指教一下。
到此這篇關(guān)于詳解如何愉快的在微信小程序中使用SVG圖標的文章就介紹到這了,更多相關(guān)小程序使用SVG圖標內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6936529740433997861
