uniapp之微信小程序开发——根据主题色动态修改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 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"><defs><style type="text/css"></style></defs><path 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="#1296db"></path></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。

<template><view><view :style="{backgroundImage: 'url('+svgData+')}'" class="icon"></view></view>
</template><script>import svg from './lib/svg_model.js'export default{data(){return {svgData:'"' + svg + '"',//需要在字符串前后加上一对引号（非常关键！）}},created(){}}
</script>
<style scoped>.icon{background-size: cover;display: inline-block;width: 70rpx;height: 70rpx;}
</style>

如果出现，说明引用成功！

小程序根据主题色，动态修改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后的颜色就可以了，肯定没问题。

未完待续，后面会陆续把小程序开发填的坑分享给大家，请持续关注哟~