动态设置svg颜色
背景
小程序的想要使用不同颜色的svg只能通过引入多个svg文件。之前就有过动态改变svg颜色的需求，这几天看到也有其他同学想拥有这个功能。就想着能不能自己造一个。
解决方案
需求：
1.可以动态设置svg颜色。
2.最好不要改动svg源文件。
3.使用方便。
调查：
1.svg文件的颜色可以通过fill=“{color}”的值设置。所以基本思路就是，用正则替换改变color值，实现颜色的变化。
2.不想改变源文件，所以考虑以utf-8的格式读取svg文件，然后用正则替换后，将其转化为base64格式直接显示，而不是替换后写回文件。了解了一下，image已经支持base64。
[图片]
3.为了使用方便，功能实现后，考虑做成自定义组件。
代码
代码部分并不复杂，就三步： 读取文件，正则替换, base64编码。其中base64编码部分使用Dorian大佬分享的工具，非常感谢！
[图片]
使用wx.getFileSystemManager()读取文件[代码]const fs = wx.getFileSystemManager()
getSvgFile(src, color) {
let that = this;
fs.readFile({
filePath: src,
encoding: 'UTF-8',
position: 0,
success(res) {
let sourceFile = res.data;
},
fail(res) {
console.error(res)
}
})
},
[代码]
正则替换(考虑到部分svg没有默认fill属性，所以在svg头部主动增加了fill属性)[代码]changeColor(sourceFile, color) {
let newSvg;
if (/fill=".*?"/.test(sourceFile)) {
newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${color}"`); // SVG有默认色
} else {
newSvg = sourceFile.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色
}
return newSvg
}
[代码]
base64编码[代码]import { Base64 } from './base64.js';
const base64 = new Base64()
getSvgFile(src, color) {
let that = this;
fs.readFile({
filePath: src,
encoding: 'UTF-8',
position: 0,
success(res) {
let sourceFile = res.data;
let newFile = that.changeColor(sourceFile, color);
let svgBase64File = base64.encode(newFile);
that.setData({
svgData: 'data:image/svg+xml;base64,' + svgBase64File
})
},
fail(res) {
console.error(res)
}
})
},
[代码]
到这里主体功能完成，再封装成自定义组件就完工啦。自定义组件的代码片段可以自取：
https://developers.weixin.qq.com/s/GrQhtZmg7yCJ
使用方法及效果
1.打开代码片段，把svg文件夹复制到自己项目的component文件夹下
[图片]
2.在需要引入svg的页面引入组件
[图片]
3.使用svg标签，可以自定义宽高，和颜色，以及文件路径。
[图片]
[图片]
color也支持使用JS动态控制，实现颜色变化的效果。
[图片]
4.目前就用了阿里icon的一些svg进行测试。有bug请多多反馈，也希望大家能提出更好的思路。
