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

更新時(shí)間：2022年07月04日 09:53:30 作者：遲到的刀鋒

SVG可被非常多的工具讀取和修改SVG與JPEG和GIF圖像比起來,尺寸更小,且可壓縮性更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于微信小程序中如何實(shí)現(xiàn)動(dòng)態(tài)改變SVG顏色和尺寸的相關(guān)資料,需要的朋友可以參考下

前言

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

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

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

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

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

例如：

<svg t="1656728349217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" width="200" height="200"><path d="M874.666667 467.2c-10.666667-10.666667-29.866667-12.8-42.666667 0l-343.466667 341.333333c-74.666667 74.666667-198.4 74.666667-275.2 0-36.266667-36.266667-57.6-85.333333-57.6-136.533333s19.2-100.266667 57.6-136.533333L556.8 192c46.933333-46.933333 121.6-46.933333 168.533333 0 23.466667 23.466667 34.133333 53.333333 34.133334 83.2 0 32-12.8 61.866667-34.133334 83.2L384 704c-17.066667 17.066667-44.8 17.066667-64 0-8.533333-8.533333-12.8-19.2-12.8-32s4.266667-23.466667 12.8-32l317.866667-315.733333c10.666667-10.666667 12.8-29.866667 0-42.666667-10.666667-12.8-29.866667-12.8-42.666667 0L277.333333 597.333333c-19.2 19.2-29.866667 46.933333-29.866666 74.666667S258.133333 725.333333 277.333333 746.666667c40.533333 40.533333 106.666667 40.533333 147.2 0L768 403.2c34.133333-34.133333 53.333333-78.933333 53.333333-125.866667s-19.2-93.866667-53.333333-125.866666a178.986667 178.986667 0 0 0-253.866667 0l-341.333333 341.333333c-46.933333 46.933333-74.666667 110.933333-74.666667 179.2s25.6 132.266667 74.666667 179.2c49.066667 49.066667 115.2 74.666667 179.2 74.666667s130.133333-25.6 179.2-74.666667l343.466667-341.333333c10.666667-12.8 10.666667-32 0-42.666667z" p-id="2590"></path></svg>

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

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

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

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

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

export default {
    attachment: 'data:image/svg+xml;base64,PHN2ZyB0PSIxNjU2NzI4MzQ5MjE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc0LjY2NjY2NyA0NjcuMmMtMTAuNjY2NjY3LTEwLjY2NjY2Ny0yOS44NjY2NjctMTIuOC00Mi42NjY2NjcgMGwtMzQzLjQ2NjY2NyAzNDEuMzMzMzMzYy03NC42NjY2NjcgNzQuNjY2NjY3LTE5OC40IDc0LjY2NjY2Ny0yNzUuMiAwLTM2LjI2NjY2Ny0zNi4yNjY2NjctNTcuNi04NS4zMzMzMzMtNTcuNi0xMzYuNTMzMzMzczE5LjItMTAwLjI2NjY2NyA1Ny42LTEzNi41MzMzMzNMNTU2LjggMTkyYzQ2LjkzMzMzMy00Ni45MzMzMzMgMTIxLjYtNDYuOTMzMzMzIDE2OC41MzMzMzMgMCAyMy40NjY2NjcgMjMuNDY2NjY3IDM0LjEzMzMzMyA1My4zMzMzMzMgMzQuMTMzMzM0IDgzLjIgMCAzMi0xMi44IDYxLjg2NjY2Ny0zNC4xMzMzMzQgODMuMkwzODQgNzA0Yy0xNy4wNjY2NjcgMTcuMDY2NjY3LTQ0LjggMTcuMDY2NjY3LTY0IDAtOC41MzMzMzMtOC41MzMzMzMtMTIuOC0xOS4yLTEyLjgtMzJzNC4yNjY2NjctMjMuNDY2NjY3IDEyLjgtMzJsMzE3Ljg2NjY2Ny0zMTUuNzMzMzMzYzEwLjY2NjY2Ny0xMC42NjY2NjcgMTIuOC0yOS44NjY2NjcgMC00Mi42NjY2NjctMTAuNjY2NjY3LTEyLjgtMjkuODY2NjY3LTEyLjgtNDIuNjY2NjY3IDBMMjc3LjMzMzMzMyA1OTcuMzMzMzMzYy0xOS4yIDE5LjItMjkuODY2NjY3IDQ2LjkzMzMzMy0yOS44NjY2NjYgNzQuNjY2NjY3UzI1OC4xMzMzMzMgNzI1LjMzMzMzMyAyNzcuMzMzMzMzIDc0Ni42NjY2NjdjNDAuNTMzMzMzIDQwLjUzMzMzMyAxMDYuNjY2NjY3IDQwLjUzMzMzMyAxNDcuMiAwTDc2OCA0MDMuMmMzNC4xMzMzMzMtMzQuMTMzMzMzIDUzLjMzMzMzMy03OC45MzMzMzMgNTMuMzMzMzMzLTEyNS44NjY2NjdzLTE5LjItOTMuODY2NjY3LTUzLjMzMzMzMy0xMjUuODY2NjY2YTE3OC45ODY2NjcgMTc4Ljk4NjY2NyAwIDAgMC0yNTMuODY2NjY3IDBsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2MtNDYuOTMzMzMzIDQ2LjkzMzMzMy03NC42NjY2NjcgMTEwLjkzMzMzMy03NC42NjY2NjcgMTc5LjJzMjUuNiAxMzIuMjY2NjY3IDc0LjY2NjY2NyAxNzkuMmM0OS4wNjY2NjcgNDkuMDY2NjY3IDExNS4yIDc0LjY2NjY2NyAxNzkuMiA3NC42NjY2NjdzMTMwLjEzMzMzMy0yNS42IDE3OS4yLTc0LjY2NjY2N2wzNDMuNDY2NjY3LTM0MS4zMzMzMzNjMTAuNjY2NjY3LTEyLjggMTAuNjY2NjY3LTMyIDAtNDIuNjY2NjY3eiIgcC1pZD0iMjU5MCI+PC9wYXRoPjwvc3ZnPg=='
}

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

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

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

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

import { Base64 } from "./Base64";
export const getColorSVG = (svgBase64, color) => {
    try {
        svgBase64 = svgBase64.substring(svgBase64.indexOf(',') + 1, svgBase64.length); // 取出第三部分
        const svg = Base64.decode(svgBase64); // 解碼得到svg代碼

        if (/<svg /.test(svg)) { // 先簡(jiǎn)單判斷是一下否是一個(gè)svg
            let newSvg;
            if (/fill=".*?"/.test(svg)) {
                newSvg = svg.replace(/fill=".*?"/, `fill="${color}"`);  // SVG有默認(rèn)色
            } else {
                newSvg = svg.replace(/<svg /, `<svg fill="${color}"`); // 無默認(rèn)色
            }
            return 'data:image/svg+xml;base64,' + Base64.encode(newSvg); // 替換完之后再組合回去
        }
    } catch { }
    return '';
};

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

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

import SvgManager from "../../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)聽名稱和顏色變化
        'name,color': function (name, color) {
            this.changeIcon(name, color);
        }
    },
    data: {
        svgData: ''
    },

    methods: {
        changeIcon(name, color) {
            let svgBase64 = SvgManager[name]; // 從svg管理器中取出對(duì)應(yīng)svg
            svgBase64 = getColorSVG(svgBase64, color); // 替換它的顏色
            this.setData({
                svgData: svgBase64 // 渲染
            });
        }
    }
})

WXML

<view class="m-icon" style="width: {{ size }};">
    <image
        src="{{ svgData }}"
        mode="widthFix"
    ></image>
</view>

WXSS

.m-icon image {
    width: 100%;
}

4. 注冊(cè)組件，使用

注冊(cè)，在要使用的頁面注冊(cè)或全局注冊(cè)，我這里就全局注冊(cè)了，在app.json添加以下配置

{
    ...setting,
    "usingComponents": {
        "m-icon": "/components/m-icon/index"
    },
}

然后就可以愉快地在任何頁面使用我們自己的icon組件了

<m-icon
    name="attachment"
    color="red"
    size="30rpx"
/>
<m-icon
    name="attachment"
    color="green"
    size="60rpx"
/>
<m-icon
    name="attachment"
    color="blue"
    size="90rpx"
/>

結(jié)語

動(dòng)態(tài)改變svg就一個(gè)思路，image支持base64，svg有fill屬性可以改變顏色，我們可以操作字符串替換fill，ok，就到這里結(jié)束啦！有更好的思路歡迎大家提出.。本文項(xiàng)目代碼：github.com/daofeng-cod…

總結(jié)

到此這篇關(guān)于微信小程序中如何實(shí)現(xiàn)動(dòng)態(tài)改變SVG顏色和尺寸的文章就介紹到這了,更多相關(guān)小程序動(dòng)態(tài)改變SVG顏色尺寸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: