微信小程序里引入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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
微信小程序实现图片翻转效果的实例代码
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
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP新手入门学习方法
2011/05/08 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
新学期班主任寄语
2014/01/18 职场文书
投资意向书范本
2014/04/01 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
java代码实现空间切割
2022/01/18 Java/Android
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android