uniapp之微信小程序开发教程（3）——根据主题色动态修改svg的颜色
文章目录
- 小程序引用图片的几种方式
- 小程序如何引用svg图片？
- 小程序根据主题色，动态修改svg颜色
- 总结及注意点
小程序引用图片的几种方式
这一期我们直入主题，教大家如何动态改变图标的颜色。
首先，我们知道小程序引用图片的方式并不多。目前小程序并不支持直接引用svg文件，也不支持直接引用本地文件。总结下来，可行的方法有如下几种：
img的src引用
- 云文件的cloudID
- 图片的https链接
- 图片base64格式
字体图标
- 如uniapp的uni-icons插件，就是引用ttf文件，然后在text中使用图标对应的unicode码
background-image的url属性
- 图片的https链接
- data类型Url
注意：这篇文章针对纯色的svg进行改颜色，如果颜色不止一种，并不适用
小程序如何引用svg图片？
我们知道，如果直接引用图片，是很难修改颜色的，因为每个像素都已经填充了颜色，且进行了压缩。所以排除了img的src引用方式，以及background-image的第一种方式。
我们知道uni-icons的使用方法里可以配置icon的颜色，但是插件的图片有限，可能无法满足我们的需求。所以这里我们需要新的方法。
我们选择background-image的data类型url，引用svg格式的图片。具体怎么做呢？
首先，准备一个svg文件。svg很多图片都可以导出这种格式，如xd、iconfont等。我从iconfont中下载一个svg文件，如下：
可以看到，svg文件里用于路径颜色填充的属性是fill，fill后面跟了一个十六进制的颜色值，这是改颜色的关键所在。
这个svg文件是已经压缩好的，如果没有压缩，我们可以在线压缩以下先：在线压缩网址。
我们当然可以把svg直接转base64，然后用img src进行引用，但是base64编码后，我们无法修改其颜色。
那么有了这个svg文件，我们怎么在小程序中引用呢？
我们需要把这个svg格式先转为data类型的url。可以通过以下网址在线转换：在线svg内联格式生成。
这一步本质上是先对svg做了url-encode，主要是#这些符号做转义。然后在转义后的字符串前面加上data:image/svg+xml,字样。
转换后的svg格式如下：
"data:image/svg+xml,%3Csvg t='1576936511057' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1352' xmlns:xlink='http://www.w3.org/1999/xlink' width='64' height='64'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M512.2 475.7c-8.2-0.3-16.1-2.4-23.4-6.1L192.6 330.2c-24.9-11.1-36.1-40.3-25-65.2 5-11.2 13.9-20.1 25-25l281.5-133.2a89.43 89.43 0 0 1 76 0L831.7 240c24.9 11.1 36.1 40.3 25 65.2-5 11.2-13.9 20.1-25 25L535.5 469.5c-7.2 3.8-15.2 5.9-23.3 6.2z m-76.5 452.5c-7.6 0-15.1-1.9-21.8-5.5L146.3 797.2c-17-8.9-27.5-26.5-27.3-45.6v-320c0.1-18 9.7-34.5 25.1-43.7 14.3-8.1 31.8-8.1 46.1 0l267.1 125.4c16.1 8.7 26.4 25.4 27.1 43.7v320.4c-0.2 17.9-9.6 34.4-24.9 43.7-7.2 4.3-15.4 6.8-23.8 7.1z m152.9 0c-8.3 0-16.5-2.2-23.8-6.3-15.3-9.3-24.7-25.8-24.9-43.7V556.9c0.4-18.2 10.4-34.8 26.2-43.7L835 387c14.2-7.5 31.4-7.1 45.2 1.1 15.5 9.1 25 25.7 25.1 43.7v319.8c0.4 18.9-9.7 36.5-26.2 45.6L610.5 922.8c-6.8 3.6-14.3 5.5-21.9 5.4z' p-id='1353' fill='%231296db'%3E%3C/path%3E%3C/svg%3E"
我们将该svg文件保存在一个js中
//svg_model.js
const url = "data:image/svg+xml,%3Csvg t='1576936511057' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1352' xmlns:xlink='http://www.w3.org/1999/xlink' width='64' height='64'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M512.2 475.7c-8.2-0.3-16.1-2.4-23.4-6.1L192.6 330.2c-24.9-11.1-36.1-40.3-25-65.2 5-11.2 13.9-20.1 25-25l281.5-133.2a89.43 89.43 0 0 1 76 0L831.7 240c24.9 11.1 36.1 40.3 25 65.2-5 11.2-13.9 20.1-25 25L535.5 469.5c-7.2 3.8-15.2 5.9-23.3 6.2z m-76.5 452.5c-7.6 0-15.1-1.9-21.8-5.5L146.3 797.2c-17-8.9-27.5-26.5-27.3-45.6v-320c0.1-18 9.7-34.5 25.1-43.7 14.3-8.1 31.8-8.1 46.1 0l267.1 125.4c16.1 8.7 26.4 25.4 27.1 43.7v320.4c-0.2 17.9-9.6 34.4-24.9 43.7-7.2 4.3-15.4 6.8-23.8 7.1z m152.9 0c-8.3 0-16.5-2.2-23.8-6.3-15.3-9.3-24.7-25.8-24.9-43.7V556.9c0.4-18.2 10.4-34.8 26.2-43.7L835 387c14.2-7.5 31.4-7.1 45.2 1.1 15.5 9.1 25 25.7 25.1 43.7v319.8c0.4 18.9-9.7 36.5-26.2 45.6L610.5 922.8c-6.8 3.6-14.3 5.5-21.9 5.4z' p-id='1353' fill='%231296db'%3E%3C/path%3E%3C/svg%3E"
module.exports = url;
接下来，我们在一个模板中引用该svg。
如果出现
，说明引用成功！
小程序根据主题色，动态修改svg颜色
按照上述的格式，我们仅需要改变一个步骤，就可以修改svg的颜色。
原理是：先替换svg文件中所有的十六进制颜色为主题色，然后再填充到background-image的url中即可。
我们写一个替换颜色的函数：
const changeColor = function(url,color){
let res = url.replace(/%23[a-zA-Z0-9]{6}/g, color.replace("#", "%23"));//转义后的#等于%23，利用正则表达式，替换所有%23后6位为新的十六进制六位数。
return res;
}
两行就搞定了，非常简单有木有~
然后，我们在created中替换svgData:
created(){
this.svgData = changeColor(this.svgData,'#707070');
}
大功告成！
总结及注意点
这是自己摸索出来的方法，非常实用，分享给需要的你们。
需要注意的是，小程序目前好像不能支持svg中的text标签中的stroke属性，也就是如果有文字要改颜色，我建议你们把svg中的所有对象都转成path，这样统一修改fill后的颜色就可以了，肯定没问题。
未完待续，后面会陆续把小程序开发填的坑分享给大家，请持续关注哟~