微信小程序里引入SVG矢量图标的方法


Posted in Javascript onSeptember 20, 2019

引言

因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作。同时还是因为微信小程序的限制,我们要先把svg的xml编码转码为base64编码

首先,说明以下我们常见的svg矢量图是什么?下面引用百度百科的话:

svg是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式

可能还是比较迷糊,那我们来看看,用记事本打开一个svg,里面的编码是什么:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg 
t="1532946882675" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" 
xmlns="http://www.w3.org/2000/svg" p-id="826" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" 
height="200"><defs><style type="text/css"></style></defs><path d="M914.75 
466.75L832 384V256a64.19 64.19 0 0 0-64-64H640l-82.75-82.75a64.19 64.19 0 0 
0-90.51 0L384 192H256a64.19 64.19 0 0 0-64 64v128l-82.75 82.75a64.19 64.19 0 
0 0 0 90.51L192 640v128a64.19 64.19 0 0 0 64 64h128l82.75 82.75a64.19 64.19 0 
0 0 90.51 0L640 832h128a64.19 64.19 0 0 0 64-64V640l82.75-82.75a64.19 64.19 0 
0 0 0-90.5zM512 736L320 384h96l96 192 96-192h96z" p-id="827" 
fill="#F36778"></path></svg>

好了,你看到了<?xml/svg11.dtd,那我们就明白了,这是一种由特定的DTD约束的xml文件,www标准组织定义了这个标准或者说约束,来描述定义svg,所以我们可以知道svg其实就是xml的一个小子集。

步骤好了,下面介绍一个网站,用来将xml文件编码转码为base64编码:https://www.sojson.com/image2base64.html

1、在的网站的选择组件中选择需要转换的svg,然后在网站下面的转换框中复制转换成功的base64格式的代码

微信小程序里引入SVG矢量图标的方法

2、将复制后的代码粘贴到this=> [background-image : url("this")],然后对应的view或者text中加入样式即可

WXSS

微信小程序里引入SVG矢量图标的方法

WXML

微信小程序里引入SVG矢量图标的方法

效果图

微信小程序里引入SVG矢量图标的方法

PS顺便安利一下这个网站,虽然界面不怎么美观,但是功能确实良心,作为前端开发的辅助工具网站还是蛮OK滴~做个引流?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
微信小程序实现图片翻转效果的实例代码
Sep 20 #Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 #Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 #Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 #Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 #Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 #Javascript
关于layui 下拉列表的change事件详解
Sep 20 #Javascript
You might like
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python算术运算符实例详解
2017/05/31 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python、Matlab求定积分的实现
2019/11/20 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
jupyter notebook实现显示行号
2020/04/13 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
认识深刻的检讨书
2014/02/16 职场文书
公司经理任命书
2014/06/05 职场文书
体育教师求职信
2014/06/30 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
祝寿主持词
2015/07/02 职场文书
初中地理教学反思
2016/02/19 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers