亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序里使用SVG矢量圖標(biāo)方法詳解

 更新時間：2018年10月19日 10:53:00   投稿：wdc  
在微信小程序開發(fā)過程中需要在小程序里使用SVG矢量圖標(biāo),下面為大家分享2種在微信小程序中引入SVG矢量圖標(biāo)的方法

在微信小程序開發(fā)過程中需要在小程序里使用SVG矢量圖標(biāo)，至于為什么要使用SVG圖標(biāo)相信看到這篇文章的你應(yīng)該明白，如果你不明白請百度一下

微信小程序里使用SVG矢量圖標(biāo)有2種引入方法：

一、SVG圖標(biāo)轉(zhuǎn)換為BASE64編碼

使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG圖標(biāo)轉(zhuǎn)換成BASE64編碼

 

注意：生成BASE64編碼時需要把開頭的 data:image/svg; 修改成 data:image/svg+xml; 這個在線工具的問題，使用其它在線BASE64編碼功能時大家一定要注意

復(fù)制轉(zhuǎn)換后的編碼至wxss文件中相應(yīng)的 background-image:url("SVG圖標(biāo)BASE64編碼") 中，如下代碼

.svg{background:url("data:svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAIAAAAhotZpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+2T3kLSMg8LC1QJzR/Dv3t/jrmSE9K/tTuKTbVJF1LQ93QcQG6L6nPEkWqECzSEhhiahTSNGLN0KKH4yG1CDLmhCN8EMskTdhAEXqaofsy9LWqNOCmeEgtgJRZZOF4EA0DlnSoC642kfxdQ+o+S1IOeURyXlRtSxVlJN3Ykve1Eaqwyvs2WuhQYC8Sq7nVDhYb6QhzJlL9rxkltKKokZKLdEhHB8l8OdRUNG6qsQ9sclBHkZ6k7Ojc0jJaSfLqYCG+g3h1E99dDnm+P2oJetK2VLClE7LNtigHIBZI8mpOiGb0EebGhojVQl1xj5FXRSITP8YpRBpYFhiOKJlgJq9oKs3xhA+kB5UvppaOxhxJ0zGxMxDMkDSTZkiaIWkmRUn6fwEGAE2xLmu6HJtTAAAAAElFTkSuQmCC");
width:100rpx;
height:100rpx;
background-size: contain
}

同時還需要添加 background-size: contain 屬性使圖標(biāo)能根據(jù)元素大小自動縮放

然后在wxss對應(yīng)的wxml文件中添加

 <view class="svg">
 </view>

編譯后的效果

 

二、使用運程地址引入SVG圖標(biāo)

把SVG圖標(biāo)上傳到網(wǎng)站服務(wù)器上，在瀏覽器中輸入SVG圖標(biāo)地址測試是否能正常打開

 

復(fù)制SVG圖標(biāo)地址到  background-image:url(SVG圖標(biāo)URL地址) 如下

.svg{background:url(http://mt.com/coding.svg);
 width:100rpx;
 height:100rpx;
}

 編譯后的效果

 

總結(jié)：

第一種方法直接把SVG圖標(biāo)BASE64編碼放到WXSS文件內(nèi)，這樣做會大大增加微信小程序的體積，如果要更換圖標(biāo)還需要重新編譯上傳，不推薦

第二種方法相比第一種方法不會增加小程序的體積，需要更換圖標(biāo)時上傳到服務(wù)器即可，非常靈活，推薦使用第二種方法

更多微信小程序開發(fā)文章請點擊下方相關(guān)文章查閱

相關(guān)文章

最新評論