mpvue微信小程序中使用svg图标,并通过代码动态改变图标颜色
微信小程序,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图标的路径:
我们知道svg是xml格式定义的一种图标,是通过xml代码中的fill属性来修改图标的颜色的,UI给的svg默认都是黑色,当我们需要其他颜色的图标时,我们可以直接修改源码中的fill属性值达到修改颜色的目的。
(注意:svg中可能有多个fill,替换时根据需要替换即可)
但是如果我们需要在用户执行的时候动态修改图标的颜色呢?难道每种颜色都新建一个svg图标再引用?答案肯定是否定的。
直接给思路:
既然svg是通过xml定义图像的,那么为什么我们不能先获取svg图标的源码,再将其中fill的属性值替换成我们需要的颜色呢?
然后再将替换后的源码成base64格式,是不是就可以实现动态的改变图标的颜色了?
小程序api中为我们提供了读取文件的方法:wx.getFileSystemManager().readFile()
通过这个方法我们可以获取到svg文件的源码。
mpvue 框架中我们直接可以封装一个vue组件,方便各个页面使用,组件已经给大家写好了。直接复制到项目就可以使用。
组件代码:
将字符串源码转化为base64需要引入 JS-base64 这个js
npm直接安装:
$ npm install --save js-base64
icons组件:
<template><img :style="iconstyle?iconstyle:('width:' + size + 'rpx;height:' + size + 'rpx;')" :src="imgurl" :model="model"/>
</template>
<script>import { Base64 } from 'js-base64'export default {props: {size: {type: [Number, String],default: 45},src: [String],iconstyle: [String],color: [String],stroke: [String],model: [String]},data () {return {imgurl: ''}},watch: {color: function (obj) {this.initImage()},stroke: function (obj) {this.initImage()}},methods: {initImage () {if (this.color || this.stroke) {// 先获取svg源码字符串,替换 file="#ffff" stroke='#FFFFFF' 颜色这个属性,再将这个字符串转化为base64,达到修改颜色的目的wx.getFileSystemManager().readFile({filePath: this.src,encoding: 'binary',success: res => {let basestr = res.dataif (this.color) {const strArr = basestr.split(/fill="#?[a-zA-Z0-9]{0,6}"/g)const oldcolorArr = basestr.match(/fill="#?[a-zA-Z0-9]{0,6}"/g)const newcolorArr = this.color.split(',')for (let i = 0; i < newcolorArr.length; i++) {const color = newcolorArr[i]if (color) {oldcolorArr[i] = `fill="${color}"`}}let str = ''for (let i = 0; i < strArr.length; i++) {str += (strArr[i] + (oldcolorArr[i] ? oldcolorArr[i] : ''))}basestr = str}if (this.stroke) {const strArr = basestr.split(/stroke="#?[a-zA-Z0-9]{0,6}"/g)const oldcolorArr = basestr.match(/stroke="#?[a-zA-Z0-9]{0,6}"/g)const newcolorArr = this.stroke.split(',')for (let i = 0; i < newcolorArr.length; i++) {const color = newcolorArr[i]if (color) {oldcolorArr[i] = `stroke="${color}"`}}let str = ''for (let i = 0; i < strArr.length; i++) {str += (strArr[i] + (oldcolorArr[i] ? oldcolorArr[i] : ''))}basestr = str}const base64 = Base64.encode(basestr)this.imgurl = 'data:image/svg+xml;base64,' + base64}})} else {this.imgurl = this.src}}},created () {this.initImage()}}
</script>
<style scoped>img{display: block;}
</style>
组件使用:vue组件的使用不用我多说了吧~ 先在页面注册然后就能使用了。
考虑到svg还有stroke属性也可以改变颜色。并且一个文件有多个fill,stroke属性(color对应svg的fill属性,stroke对应svg的stroke属性)
我们来通过逗号”,“来分割颜色属性,逗号分隔后的数组来确定我们要替换哪个fill属性或者stroke属性。
组件使用范例:
<!-- 第一个fill属性值替换成#cccccc-->
<icons src="/static/icon/index/zaixianzhanting.svg" color="#cccccc" size="40"/><!-- 第三个fill属性替值换成#cccccc,前两个不替换-->
<icons src="/static/icon/index/zaixianzhanting.svg" color=",,#cccccc" size="40"/><!-- 第二个fill属性值替换成#cccccc,第三个fill属性换成#fff,第三个stroke属性值替换成#cccccc-->
<icons src="/static/icon/index/zaixianzhanting.svg" color=",#cccccc,#fff" stroke=",,#cccccc" size="40"/>
好了,大功告成!
原创不易,转载请注明出处!!
mpvue微信小程序中使用svg图标,并通过代码动态改变图标颜色相关推荐
- 微信小程序中使用SVG
最近在作一个微信小程序的项目,需要使用svg引入矢量图标,总结一下svg在小程序中的使用. SVG 简介 什么是SVG SVG是"Scalable Vector Graphics" ...
- 微信小程序中这么简单的设置页面背景图及字体颜色的方法,你还不会?
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲 首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
- 微信小游戏游戏显示html控件,微信小程序中如何渲染html内容(代码示例)
我们的小程序是基于「WePY」框架开发的,而「wxParse」是基于原生的小程序编写的.要想让两者兼容,必须修改「wxParse」的源代码. 「wxParse」只是简单地通过image组件对原img元 ...
- html中%3csvg%3e标签的使用,微信小程序:使用svg
先确定一点,微信小程序中使用svg标签,并不会像沃恩在html中使用一样,因为小程序并不会认可'svg'这个标签,所以我们要讨论的,是微信小程序中怎么使用svg, 先备注一点:为啥使用svg?这个没有 ...
- 微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
- 在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压 第二步:进入https:// ...
- 微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
- 微信小程序中使用阿里巴巴图标库
这里写自定义目录标题 微信小程序中使用阿里巴巴图标库 第一步 第二步 第三步 微信小程序中使用阿里巴巴图标库 第一步 阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
- 在Vue项目和微信小程序中使用阿里图标
文章目录 在vue项目中正确使用iconfont的方法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
最新文章
- (转)类库 框架 模式
- 17个提升iOS开发效率的神器
- ASP.NET命名规范
- 国务院办公厅关于2022年部分节假日安排的通知
- 泰信通获得正唐资本首轮投资,加速进军SDN、云网市场
- redhat python3.4安装步骤
- linux 无线命令
- 切记!节前给数据库做个巡检
- java中接口有什么作用?请创建一个接口(举例)
- different intergers
- 《软件需求十步走》阅读计划第三篇
- POJ 2253 1797
- SQL 之group by查询语句
- 网红电商第一股首份财报继续亏损,如涵的网红效应还能持续多久?
- 机器学习相关数据库(转)
- 获取城市a-z jso列表
- 春节高并发抢红包的技术升华综合实战(Node.js)
- 假如给我三天光明阅读心得收获
- 【jzoj4598】【准备食物】【字典树】
- MapGuide 6.5、MapGuide Open Source 和MGEnterprise2007区别