微信小程序里面如何使用svg图片

榴莲不好吃

已于 2024-01-16 18:31:56 修改

阅读量5k

点赞数

文章标签：微信小程序前端 javascript

于 2022-12-07 17:26:27 首次发布

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/128223862

版权

首先准备一段svg代码如下:

<svg t="1670404434181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" width="200" height="200"><path d="M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z" p-id="1770"></path></svg>

然后按照下面的格式更改

url('data:image/svg+xml;charset=utf-8,<svg t="1670404434181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" width="200" height="200"><path d="M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z" p-id="1770"></path></svg>')

也打开下面的网址转,
https://codepen.io/jakob-e/pen/doMoML
将svg代码贴到下图中红线圈起来的位置,会自动转成base64,
在这里插入图片描述

然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果.
在这里插入图片描述
最后在小程序里面使用,如下

<view class="back"><text class="image"></text>支付</view>


.back .image{
	width:19rpx;height:34rpx;display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg t='1670404434181' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1769' width='200' height='200'%3E%3Cpath d='M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z' p-id='1770'%3E%3C/path%3E%3C/svg%3E");
	background-size: cover;
}

结果:
在这里插入图片描述