微信小程序中如何實(shí)現(xiàn)動(dòng)態(tài)改變SVG顏色和尺寸

第微信小程序中如何實(shí)現(xiàn)動(dòng)態(tài)改變SVG顏色和尺寸目錄前言1.創(chuàng)建一個(gè)微信小程序項(xiàng)目，準(zhǔn)備好SVG素材2.封裝修改svg顏色的工廠函數(shù)3.封裝一個(gè)自定義組件，方便使用svg圖標(biāo)4.注冊(cè)組件，使用結(jié)語(yǔ)總結(jié)

前言

最近在做項(xiàng)目的時(shí)候總是因?yàn)榻M件庫(kù)的圖標(biāo)無(wú)法滿足需求而煩惱，而每次需要新的圖標(biāo)又要去找字體圖標(biāo)、生成新的css代碼而苦惱。

所以想到用svg來(lái)代替，體積也小，主要就是方便一點(diǎn)，不用每次還重新生成代碼。但是一個(gè)最重要的問(wèn)題也隨之出現(xiàn)，小程序中不支持svg代碼....但是也有曲線救國(guó)的方式，image可以顯示svg，還好沒(méi)有趕盡殺絕。

但隨之而來(lái)的又是一個(gè)新的問(wèn)題，雖然能顯示svg，但是并不能動(dòng)態(tài)改變顏色呀！偶天哪。。。又但是，image的src支持base64，哎呀，這思路不就來(lái)了嗎，既然你能base64，我還不能修改base64了？說(shuō)干就干，那就來(lái)吧！

1.創(chuàng)建一個(gè)微信小程序項(xiàng)目，準(zhǔn)備好SVG素材

創(chuàng)建好項(xiàng)目之后，就到iconfont上找兩個(gè)圖標(biāo)的svg吧！那么怎么管理svg呢？首先我們需要將svg代碼base64編碼

例如：

svgt="1656728349217"viewBox="0010241024"version="1.1"xmlns="/2000/svg"p-id="2589"width="200"height="200"pathd="M874.666667467.2c-10.666667-10.666667-29.866667-12.8-42.6666670l-343.466667341.333333c-74.66666774.666667-198.474.666667-275.20-36.266667-36.266667-57.6-85.333333-57.6-136.533333s19.2-100.26666757.6-136.533333L556.8192c46.933333-46.933333121.6-46.933333168.533333023.46666723.46666734.13333353.33333334.13333483.2032-12.861.866667-34.13333483.2L384704c-17.06666717.066667-44.817.066667-640-8.533333-8.533333-12.8-19.2-12.8-32s4.266667-23.46666712.8-32l317.866667-315.733333c10.666667-10.66666712.8-29.8666670-42.666667-10.666667-12.8-29.866667-12.8-42.6666670L277.333333597.333333c-19.219.2-29.86666746.933333-29.86666674.666667S258.133333725.333333277.333333746.666667c40.53333340.533333106.66666740.533333147.20L768403.2c34.133333-34.13333353.333333-78.93333353.333333-125.866667s-19.2-93.866667-53.333333-125.866666a178.986667178.986667000-253.8666670l-341.333333341.333333c-46.93333346.933333-74.666667110.933333-74.666667179.2s25.6132.26666774.666667179.2c49.06666749.066667115.274.666667179.274.666667s130.133333-25.6179.2-74.666667l343.466667-341.333333c10.666667-12.810.666667-320-42.666667z"p-id="2590"/path/svg

轉(zhuǎn)為image支持的base64代碼

data:image/svg+xml;base64,PHN2ZyB0PSIxNjU2NzI4MzQ5MjE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc0LjY2NjY2NyA0NjcuMmMtMTAuNjY2NjY3LTEwLjY2NjY2Ny0yOS44NjY2NjctMTIuOC00Mi42NjY2NjcgMGwtMzQzLjQ2NjY2NyAzNDEuMzMzMzMzYy03NC42NjY2NjcgNzQuNjY2NjY3LTE5OC40IDc0LjY2NjY2Ny0yNzUuMiAwLTM2LjI2NjY2Ny0zNi4yNjY2NjctNTcuNi04NS4zMzMzMzMtNTcuNi0xMzYuNTMzMzMzczE5LjItMTAwLjI2NjY2NyA1Ny42LTEzNi41MzMzMzNMNTU2LjggMTkyYzQ2LjkzMzMzMy00Ni45MzMzMzMgMTIxLjYtNDYuOTMzMzMzIDE2OC41MzMzMzMgMCAyMy40NjY2NjcgMjMuNDY2NjY3IDM0LjEzMzMzMyA1My4zMzMzMzMgMzQuMTMzMzM0IDgzLjIgMCAzMi0xMi44IDYxLjg2NjY2Ny0zNC4xMzMzMzQgODMuMkwzODQgNzA0Yy0xNy4wNjY2NjcgMTcuMDY2NjY3LTQ0LjggMTcuMDY2NjY3LTY0IDAtOC41MzMzMzMtOC41MzMzMzMtMTIuOC0xOS4yLTEyLjgtMzJzNC4yNjY2NjctMjMuNDY2NjY3IDEyLjgtMzJsMzE3Ljg2NjY2Ny0zMTUuNzMzMzMzYzEwLjY2NjY2Ny0xMC42NjY2NjcgMTIuOC0yOS44NjY2NjcgMC00Mi42NjY2NjctMTAuNjY2NjY3LTEyLjgtMjkuODY2NjY3LTEyLjgtNDIuNjY2NjY3IDBMMjc3LjMzMzMzMyA1OTcuMzMzMzMzYy0xOS4yIDE5LjItMjkuODY2NjY3IDQ2LjkzMzMzMy0yOS44NjY2NjYgNzQuNjY2NjY3UzI1OC4xMzMzMzMgNzI1LjMzMzMzMyAyNzcuMzMzMzMzIDc0Ni42NjY2NjdjNDAuNTMzMzMzIDQwLjUzMzMzMyAxMDYuNjY2NjY3IDQwLjUzMzMzMyAxNDcuMiAwTDc2OCA0MDMuMmMzNC4xMzMzMzMtMzQuMTMzMzMzIDUzLjMzMzMzMy03OC45MzMzMzMgNTMuMzMzMzMzLTEyNS44NjY2NjdzLTE5LjItOTMuODY2NjY3LTUzLjMzMzMzMy0xMjUuODY2NjY2YTE3OC45ODY2NjcgMTc4Ljk4NjY2NyAwIDAgMC0yNTMuODY2NjY3IDBsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2MtNDYuOTMzMzMzIDQ2LjkzMzMzMy03NC42NjY2NjcgMTEwLjkzMzMzMy03NC42NjY2NjcgMTc5LjJzMjUuNiAxMzIuMjY2NjY3IDc0LjY2NjY2NyAxNzkuMmM0OS4wNjY2NjcgNDkuMDY2NjY3IDExNS4yIDc0LjY2NjY2NyAxNzkuMiA3NC42NjY2NjdzMTMwLjEzMzMzMy0yNS42IDE3OS4yLTc0LjY2NjY2N2wzNDMuNDY2NjY3LTM0MS4zMzMzMzNjMTAuNjY2NjY3LTEyLjggMTAuNjY2NjY3LTMyIDAtNDIuNjY2NjY3eiIgcC1pZD0iMjU5MCI+PC9wYXRoPjwvc3ZnPg==

這里對(duì)轉(zhuǎn)換之后的結(jié)果做一個(gè)說(shuō)明，共分成三部分：

data:image/svg+xml;base64首部的這一串作為固定值，讓image能夠識(shí)別你給它的是什么東西，是一個(gè)圖片、svg+xml格式的、經(jīng)過(guò)了base64編碼的，這個(gè)解釋不是專業(yè)的哈，能看懂就行。一個(gè)英文逗號(hào)，將前后隔離開(kāi)。逗號(hào)后面的就是svg代碼base64編碼之后得到的字符串，這就是我們可操作的字符串啦

接下來(lái)，在小程序中新建一個(gè)文件/asstes/SvgManager.js用來(lái)管理我們?nèi)康膕vg代碼，因?yàn)橐僮鱯vg的base64，最好就直接在項(xiàng)目中存儲(chǔ)，將轉(zhuǎn)換為base64字符串的svg通過(guò)export導(dǎo)出去

exportdefault{

attachment:'data:image/svg+xml;base64,PHN2ZyB0PSIxNjU2NzI4MzQ5MjE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc0LjY2NjY2NyA0NjcuMmMtMTAuNjY2NjY3LTEwLjY2NjY2Ny0yOS44NjY2NjctMTIuOC00Mi42NjY2NjcgMGwtMzQzLjQ2NjY2NyAzNDEuMzMzMzMzYy03NC42NjY2NjcgNzQuNjY2NjY3LTE5OC40IDc0LjY2NjY2Ny0yNzUuMiAwLTM2LjI2NjY2Ny0zNi4yNjY2NjctNTcuNi04NS4zMzMzMzMtNTcuNi0xMzYuNTMzMzMzczE5LjItMTAwLjI2NjY2NyA1Ny42LTEzNi41MzMzMzNMNTU2LjggMTkyYzQ2LjkzMzMzMy00Ni45MzMzMzMgMTIxLjYtNDYuOTMzMzMzIDE2OC41MzMzMzMgMCAyMy40NjY2NjcgMjMuNDY2NjY3IDM0LjEzMzMzMyA1My4zMzMzMzMgMzQuMTMzMzM0IDgzLjIgMCAzMi0xMi44IDYxLjg2NjY2Ny0zNC4xMzMzMzQgODMuMkwzODQgNzA0Yy0xNy4wNjY2NjcgMTcuMDY2NjY3LTQ0LjggMTcuMDY2NjY3LTY0IDAtOC41MzMzMzMtOC41MzMzMzMtMTIuOC0xOS4yLTEyLjgtMzJzNC4yNjY2NjctMjMuNDY2NjY3IDEyLjgtMzJsMzE3Ljg2NjY2Ny0zMTUuNzMzMzMzYzEwLjY2NjY2Ny0xMC42NjY2NjcgMTIuOC0yOS44NjY2NjcgMC00Mi42NjY2NjctMTAuNjY2NjY3LTEyLjgtMjkuODY2NjY3LTEyLjgtNDIuNjY2NjY3IDBMMjc3LjMzMzMzMyA1OTcuMzMzMzMzYy0xOS4yIDE5LjItMjkuODY2NjY3IDQ2LjkzMzMzMy0yOS44NjY2NjYgNzQuNjY2NjY3UzI1OC4xMzMzMzMgNzI1LjMzMzMzMyAyNzcuMzMzMzMzIDc0Ni42NjY2NjdjNDAuNTMzMzMzIDQwLjUzMzMzMyAxMDYuNjY2NjY3IDQwLjUzMzMzMyAxNDcuMiAwTDc2OCA0MDMuMmMzNC4xMzMzMzMtMzQuMTMzMzMzIDUzLjMzMzMzMy03OC45MzMzMzMgNTMuMzMzMzMzLTEyNS44NjY2NjdzLTE5LjItOTMuODY2NjY3LTUzLjMzMzMzMy0xMjUuODY2NjY2YTE3OC45ODY2NjcgMTc4Ljk4NjY2NyAwIDAgMC0yNTMuODY2NjY3IDBsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2MtNDYuOTMzMzMzIDQ2LjkzMzMzMy03NC42NjY2NjcgMTEwLjkzMzMzMy03NC42NjY2NjcgMTc5LjJzMjUuNiAxMzIuMjY2NjY3IDc0LjY2NjY2NyAxNzkuMmM0OS4wNjY2NjcgNDkuMDY2NjY3IDExNS4yIDc0LjY2NjY2NyAxNzkuMiA3NC42NjY2NjdzMTMwLjEzMzMzMy0yNS42IDE3OS4yLTc0LjY2NjY2N2wzNDMuNDY2NjY3LTM0MS4zMzMzMzNjMTAuNjY2NjY3LTEyLjggMTAuNjY2NjY3LTMyIDAtNDIuNjY2NjY3eiIgcC1pZD0iMjU5MCI+PC9wYXRoPjwvc3ZnPg=='

2.封裝修改svg顏色的工廠函數(shù)

開(kāi)始之前，我們要先明白，svg是如何改變顏色的。

svg中有一個(gè)屬性fill，這里就是用來(lái)填寫(xiě)svg的填充顏色的，支持十六進(jìn)制，例如#ff0000就是紅色，也可以填寫(xiě)red，跟css差不多，明白這一點(diǎn)就可以進(jìn)行接下來(lái)的操作了。

工廠函數(shù)代碼：實(shí)現(xiàn)思路就是將SVG的base64字符串解碼之后得到svg代碼，替換svg的fill屬性來(lái)改變顏色，然后再Base64編碼回去。Base64的代碼網(wǎng)上隨便找一份就行，文章尾部會(huì)貼出代碼片段，內(nèi)含Base64代碼

import{Base64}from"./Base64";

exportconstgetColorSVG=(svgBase64,color)={

try{

svgBase64=svgBase64.substring(svgBase64.indexOf(',')+1,svgBase64.length);//取出第三部分

constsvg=Base64.decode(svgBase64);//解碼得到svg代碼

if(/svg/.test(svg)){//先簡(jiǎn)單判斷是一下否是一個(gè)svg

letnewSvg;

if(/fill=".*"/.test(svg)){

newSvg=svg.replace(/fill=".*"/,`fill="${color}"`);//SVG有默認(rèn)色

}else{

newSvg=svg.replace(/svg/,`svgfill="${color}"`);//無(wú)默認(rèn)色

return'data:image/svg+xml;base64,'+Base64.encode(newSvg);//替換完之后再組合回去

}catch{}

return'';

3.封裝一個(gè)自定義組件，方便使用svg圖標(biāo)

新建一個(gè)組件，保存在/components/m-icon/index

importSvgManagerfrom"../../asstes/SvgManager"

import{getColorSVG}from"../../utils/tools"

Component({

options:{

styleIsolation:'apply-shared',

virtualHost:true

properties:{

/**圖標(biāo)名稱*/

name:{

type:String,

value:''

/**圖標(biāo)顏色*/

color:{

type:String,

value:'#000000'

size:{

type:String,

value:'28rpx'

observers:{

//監(jiān)聽(tīng)名稱和顏色變化

'name,color':function(name,color){

this.changeIcon(name,color);

data:{

svgData:''

meth