微信小程序中如何实现动态改变SVG颜色和尺寸
目录
- 前言
- 1. 创建一个微信小程序项目，准备好SVG素材
- 2. 封装修改svg颜色的工厂函数
- 3. 封装一个自定义组件，方便使用svg图标
- 4. 注册组件，使用
- 结语
- 总结
前言
文章图片
最近在做项目的时候总是因为组件库的图标无法满足需求而烦恼，而每次需要新的图标又要去找字体图标、生成新的css代码而苦恼。
所以想到用svg来代替，体积也小，主要就是方便一点，不用每次还重新生成代码。但是一个最重要的问题也随之出现，小程序中不支持svg代码....但是也有曲线救国的方式，image可以显示svg，还好没有赶尽杀绝。
但随之而来的又是一个新的问题，虽然能显示svg，但是并不能动态改变颜色呀！偶天哪。。。又但是，image的src支持base64，哎呀，这思路不就来了吗，既然你能base64，我还不能修改base64了？说干就干，那就来吧！
1. 创建一个微信小程序项目，准备好SVG素材 创建好项目之后，就到iconfont上找两个图标的svg吧！那么怎么管理svg呢？首先我们需要将svg代码base64编码
例如：
转为image支持的base64代码
data:image/svg+xml; base64,PHN2ZyB0PSIxNjU2NzI4MzQ5MjE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc0LjY2NjY2NyA0NjcuMmMtMTAuNjY2NjY3LTEwLjY2NjY2Ny0yOS44NjY2NjctMTIuOC00Mi42NjY2NjcgMGwtMzQzLjQ2NjY2NyAzNDEuMzMzMzMzYy03NC42NjY2NjcgNzQuNjY2NjY3LTE5OC40IDc0LjY2NjY2Ny0yNzUuMiAwLTM2LjI2NjY2Ny0zNi4yNjY2NjctNTcuNi04NS4zMzMzMzMtNTcuNi0xMzYuNTMzMzMzczE5LjItMTAwLjI2NjY2NyA1Ny42LTEzNi41MzMzMzNMNTU2LjggMTkyYzQ2LjkzMzMzMy00Ni45MzMzMzMgMTIxLjYtNDYuOTMzMzMzIDE2OC41MzMzMzMgMCAyMy40NjY2NjcgMjMuNDY2NjY3IDM0LjEzMzMzMyA1My4zMzMzMzMgMzQuMTMzMzM0IDgzLjIgMCAzMi0xMi44IDYxLjg2NjY2Ny0zNC4xMzMzMzQgODMuMkwzODQgNzA0Yy0xNy4wNjY2NjcgMTcuMDY2NjY3LTQ0LjggMTcuMDY2NjY3LTY0IDAtOC41MzMzMzMtOC41MzMzMzMtMTIuOC0xOS4yLTEyLjgtMzJzNC4yNjY2NjctMjMuNDY2NjY3IDEyLjgtMzJsMzE3Ljg2NjY2Ny0zMTUuNzMzMzMzYzEwLjY2NjY2Ny0xMC42NjY2NjcgMTIuOC0yOS44NjY2NjcgMC00Mi42NjY2NjctMTAuNjY2NjY3LTEyLjgtMjkuODY2NjY3LTEyLjgtNDIuNjY2NjY3IDBMMjc3LjMzMzMzMyA1OTcuMzMzMzMzYy0xOS4yIDE5LjItMjkuODY2NjY3IDQ2LjkzMzMzMy0yOS44NjY2NjYgNzQuNjY2NjY3UzI1OC4xMzMzMzMgNzI1LjMzMzMzMyAyNzcuMzMzMzMzIDc0Ni42NjY2NjdjNDAuNTMzMzMzIDQwLjUzMzMzMyAxMDYuNjY2NjY3IDQwLjUzMzMzMyAxNDcuMiAwTDc2OCA0MDMuMmMzNC4xMzMzMzMtMzQuMTMzMzMzIDUzLjMzMzMzMy03OC45MzMzMzMgNTMuMzMzMzMzLTEyNS44NjY2NjdzLTE5LjItOTMuODY2NjY3LTUzLjMzMzMzMy0xMjUuODY2NjY2YTE3OC45ODY2NjcgMTc4Ljk4NjY2NyAwIDAgMC0yNTMuODY2NjY3IDBsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2MtNDYuOTMzMzMzIDQ2LjkzMzMzMy03NC42NjY2NjcgMTEwLjkzMzMzMy03NC42NjY2NjcgMTc5LjJzMjUuNiAxMzIuMjY2NjY3IDc0LjY2NjY2NyAxNzkuMmM0OS4wNjY2NjcgNDkuMDY2NjY3IDExNS4yIDc0LjY2NjY2NyAxNzkuMiA3NC42NjY2NjdzMTMwLjEzMzMzMy0yNS42IDE3OS4yLTc0LjY2NjY2N2wzNDMuNDY2NjY3LTM0MS4zMzMzMzNjMTAuNjY2NjY3LTEyLjggMTAuNjY2NjY3LTMyIDAtNDIuNjY2NjY3eiIgcC1pZD0iMjU5MCI+PC9wYXRoPjwvc3ZnPg==
这里对转换之后的结果做一个说明，共分成三部分：
data:image/svg+xml; base64首部的这一串作为固定值，让image能够识别你给它的是什么东西，是一个图片、svg+xml格式的、经过了base64编码的，这个解释不是专业的哈，能看懂就行。- 一个英文逗号，将前后隔离开。
- 逗号后面的就是svg代码base64编码之后得到的字符串，这就是我们可操作的字符串啦
/asstes/SvgManager.js用来管理我们全部的svg代码，因为要操作svg的base64，最好就直接在项目中存储，将转换为base64字符串的svg通过export导出去export default {attachment: 'data:image/svg+xml; base64,PHN2ZyB0PSIxNjU2NzI4MzQ5MjE3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc0LjY2NjY2NyA0NjcuMmMtMTAuNjY2NjY3LTEwLjY2NjY2Ny0yOS44NjY2NjctMTIuOC00Mi42NjY2NjcgMGwtMzQzLjQ2NjY2NyAzNDEuMzMzMzMzYy03NC42NjY2NjcgNzQuNjY2NjY3LTE5OC40IDc0LjY2NjY2Ny0yNzUuMiAwLTM2LjI2NjY2Ny0zNi4yNjY2NjctNTcuNi04NS4zMzMzMzMtNTcuNi0xMzYuNTMzMzMzczE5LjItMTAwLjI2NjY2NyA1Ny42LTEzNi41MzMzMzNMNTU2LjggMTkyYzQ2LjkzMzMzMy00Ni45MzMzMzMgMTIxLjYtNDYuOTMzMzMzIDE2OC41MzMzMzMgMCAyMy40NjY2NjcgMjMuNDY2NjY3IDM0LjEzMzMzMyA1My4zMzMzMzMgMzQuMTMzMzM0IDgzLjIgMCAzMi0xMi44IDYxLjg2NjY2Ny0zNC4xMzMzMzQgODMuMkwzODQgNzA0Yy0xNy4wNjY2NjcgMTcuMDY2NjY3LTQ0LjggMTcuMDY2NjY3LTY0IDAtOC41MzMzMzMtOC41MzMzMzMtMTIuOC0xOS4yLTEyLjgtMzJzNC4yNjY2NjctMjMuNDY2NjY3IDEyLjgtMzJsMzE3Ljg2NjY2Ny0zMTUuNzMzMzMzYzEwLjY2NjY2Ny0xMC42NjY2NjcgMTIuOC0yOS44NjY2NjcgMC00Mi42NjY2NjctMTAuNjY2NjY3LTEyLjgtMjkuODY2NjY3LTEyLjgtNDIuNjY2NjY3IDBMMjc3LjMzMzMzMyA1OTcuMzMzMzMzYy0xOS4yIDE5LjItMjkuODY2NjY3IDQ2LjkzMzMzMy0yOS44NjY2NjYgNzQuNjY2NjY3UzI1OC4xMzMzMzMgNzI1LjMzMzMzMyAyNzcuMzMzMzMzIDc0Ni42NjY2NjdjNDAuNTMzMzMzIDQwLjUzMzMzMyAxMDYuNjY2NjY3IDQwLjUzMzMzMyAxNDcuMiAwTDc2OCA0MDMuMmMzNC4xMzMzMzMtMzQuMTMzMzMzIDUzLjMzMzMzMy03OC45MzMzMzMgNTMuMzMzMzMzLTEyNS44NjY2NjdzLTE5LjItOTMuODY2NjY3LTUzLjMzMzMzMy0xMjUuODY2NjY2YTE3OC45ODY2NjcgMTc4Ljk4NjY2NyAwIDAgMC0yNTMuODY2NjY3IDBsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2MtNDYuOTMzMzMzIDQ2LjkzMzMzMy03NC42NjY2NjcgMTEwLjkzMzMzMy03NC42NjY2NjcgMTc5LjJzMjUuNiAxMzIuMjY2NjY3IDc0LjY2NjY2NyAxNzkuMmM0OS4wNjY2NjcgNDkuMDY2NjY3IDExNS4yIDc0LjY2NjY2NyAxNzkuMiA3NC42NjY2NjdzMTMwLjEzMzMzMy0yNS42IDE3OS4yLTc0LjY2NjY2N2wzNDMuNDY2NjY3LTM0MS4zMzMzMzNjMTAuNjY2NjY3LTEyLjggMTAuNjY2NjY3LTMyIDAtNDIuNjY2NjY3eiIgcC1pZD0iMjU5MCI+PC9wYXRoPjwvc3ZnPg=='}
2. 封装修改svg颜色的工厂函数 开始之前，我们要先明白，svg是如何改变颜色的。
svg中有一个属性
fill，这里就是用来填写svg的填充颜色的，支持十六进制，例如#ff0000就是红色，也可以填写red，跟css差不多，明白这一点就可以进行接下来的操作了。工厂函数代码： 实现思路就是将SVG的base64字符串解码之后得到svg代码，替换svg的
fill属性来改变颜色，然后再Base64编码回去。Base64的代码网上随便找一份就行，文章尾部会贴出代码片段，内含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 (/
3. 封装一个自定义组件，方便使用svg图标 新建一个组件，保存在/components/m-icon/index
- JS
import SvgManager from "../../asstes/SvgManager"import { getColorSVG } from "../../utils/tools"Component({options: {styleIsolation: 'apply-shared',virtualHost: true},properties: {/** 图标名称 */name: {type: String,value: ''},/** 图标颜色 */color: {type: String,value: '#000000'},size: {type: String,value: '28rpx'}},observers: {// 监听名称和颜色变化'name,color': function (name, color) {this.changeIcon(name, color); }},data: {svgData: ''},methods: {changeIcon(name, color) {let svgBase64 = SvgManager[name]; // 从svg管理器中取出对应svgsvgBase64 = getColorSVG(svgBase64, color); // 替换它的颜色this.setData({svgData: svgBase64 // 渲染}); }}})
- WXML
- WXSS
.m-icon image {width: 100%; }
4. 注册组件，使用
- 注册，在要使用的页面注册或全局注册，我这里就全局注册了，在
app.json添加以下配置{...setting,"usingComponents": {"m-icon": "/components/m-icon/index"},}
然后就可以愉快地在任何页面使用我们自己的icon组件了
文章图片
结语 动态改变svg就一个思路，image支持base64，svg有fill属性可以改变颜色，我们可以操作字符串替换fill，ok，就到这里结束啦！有更好的思路欢迎大家提出.。 本文项目代码：github.com/daofeng-cod…
总结 【微信小程序中如何实现动态改变SVG颜色和尺寸】到此这篇关于微信小程序中如何实现动态改变SVG颜色和尺寸的文章就介绍到这了,更多相关小程序动态改变SVG颜色尺寸内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- 多阶段构建优化Go|多阶段构建优化Go 程序Docker镜像
- 教你从创建数据表到实现最基础增删改查的实现全过程，小白也能轻松学会【带附件】
- 小和尚的故事
- 安镇|安镇 急售 两套好房出售
- Day16-17|Day16-17 多线程
- 投稿|寻找“龙漕沟”的小红书博主：未开发、无人区，背后都是真金白银
- 有句话想对你说
- 现金流量指标小结
- 使用Olami|使用Olami sdk实现一个语音查询股票的iOS程序
- 极兔速递连接企业微信群机器人（快速解决物流状态变化无法自动通知相关人员的问题）