引言

成都創(chuàng)新互聯(lián)公司是專業(yè)的武江網站建設公司，武江接單;提供網站制作、成都網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行武江網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

因為微信小程序的限制，引入外部圖片或者矢量圖，只能通過設置背景圖片background-image : url("base64轉碼后的代碼");的方式來進行操作。同時還是因為微信小程序的限制，我們要先把svg的xml編碼轉碼為base64編碼

首先，說明以下我們常見的svg矢量圖是什么？下面引用百度百科的話：

svg是基于可擴展標記語言（標準通用標記語言的子集），用于描述二維矢量圖形的一種圖形格式

可能還是比較迷糊，那我們來看看，用記事本打開一個svg，里面的編碼是什么：

<?xml version="1.0" standalone="no"?>

好了，你看到了<?xml/svg11.dtd，那我們就明白了，這是一種由特定的DTD約束的xml文件，www標準組織定義了這個標準或者說約束，來描述定義svg，所以我們可以知道svg其實就是xml的一個小子集。

步驟好了，下面介紹一個網站，用來將xml文件編碼轉碼為base64編碼：https://www.sojson.com/image2base64.html

1、在↑的網站的選擇組件中選擇需要轉換的svg，然后在網站下面的轉換框中復制轉換成功的base64格式的代碼

2、將復制后的代碼粘貼到this=> [background-image : url("this")]，然后對應的view或者text中加入樣式即可

WXSS

WXML

效果圖

PS順便安利一下這個網站，雖然界面不怎么美觀，但是功能確實良心，作為前端開發(fā)的輔助工具網站還是蠻OK滴~做個引流😜

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。