没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

mpvue微信小程序中使用svg图标,并通过代码动态改变图标颜色


本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同样的功能。
首先先说下svg格式(给出官方说明):

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
在mpvue中我们可以直接这样使用svg图标:

<img style="width:45rpx;height:45rpx;" src="/static/icon/index/zaixianzhanting.svg"/>

我们知道svg是xml格式定义的一种图标,是通过xml代码中的fill属性来修改图标的颜色的,UI给的svg默认都是黑色,当我们需要其他颜色的图标时,我们可以直接修改源码中的fill属性值达到修改颜色的目的。

(注意:svg中可能有多个fill,替换时根据需要替换即可)

但是如果我们需要在用户执行的时候动态修改图标的颜色呢?难道每种颜色都新建一个svg图标再引用?答案肯定是否定的。

直接给思路:
既然svg是通过xml定义图像的,那么为什么我们不能先获取svg图标的源码,再将其中fill的属性值替换成我们需要的颜色呢?
然后再将替换后的源码成base64格式,是不是就可以实现动态的改变图标的颜色了?

小程序api中为我们提供了读取文件的方法:wx.getFileSystemManager().readFile()
通过这个方法我们可以获取到svg文件的源码。

mpvue 框架中我们直接可以封装一个vue组件,方便各个页面使用

组件代码:

icons组件:

<template>
    <div>
      <img :style="{width: size + 'rpx',height: size + 'rpx'}" :src="imgurl"/>
    </div>
</template>

<script>
  import { Base64 } from 'js-base64'

export default {
    props: {
      size: {
        type: [Number, String],
        default: 45
      },
      src: [String],
      color: [String]
    },
    data () {
      return {
        imgurl: ''
      }
    },
    created () {
      if (this.color) {
        // 先获取svg源码字符串,替换 file="#ffffff" 颜色这个属性,再将这个字符串转化为base64,达到修改颜色的目的
        wx.getFileSystemManager().readFile({ //调用微信小程序接口读取文件 
          filePath: this.src,
          encoding: 'binary', // 解析成源码格式
          success: res => {
            const str = res.data.replace(/fill="#[a-zA-Z0-9]{0,6}"/, 'fill="' + this.color + '"')
            const base64 = Base64.encode(str)
            this.imgurl = 'data:image/svg+xml;base64,' + base64
          }
        })
      } else {
        this.imgurl = this.src
      }
    }
  }
</script>

组件使用:vue组件的使用不用我多说了吧~ 先在页面注册然后就能使用了。

<icons  src="/static/icon/index/zaixianzhanting.svg" color="#cccccc" size="40"/>

将字符串源码转化为base64需要引入 JS-base64 这个js

npm直接安装:
$ npm install --save js-base64


作者:Sean 寒
来源:CSDN
原文:https://blog.csdn.net/qq_35487047/article/details/94759292
版权声明:本文为博主原创文章,转载请附上博文链接!

发表评论

电子邮件地址不会被公开。 必填项已用*标注