歡迎您訪問南京欧美特级a版限制片2018官方網站,本公司專注于:網站制作、小程序開發、網站推廣。 24小時服務熱線:400-8793-956
當前位置:南京網站制作公司 > 資訊中心 > 網站知識
南京小程序開發公司教你微信程序中SVG的矢量圖標方法
來源:南京網站制作 時間:2019-05-26 08:31:55

在開發微信小程序的過程中,我們需要在小程序中使用SVG矢量圖標。至于為什么我們使用SVG圖標,我相信你應該理解這篇文章。如果您不明白,請百度。

 
在微信小程序中有兩種引入SVG矢量圖標的方法:
 
I.將SVG圖標轉換為BASE64編碼

使用http://tools.jb51.net/transcoding/img2base64工具將SVG圖標轉換為BASE64編碼
 
注意:在生成BASE64編碼時,需要先將data:image/svg;Modified改為data:image/svg+xml;這個在線工具的問題,當使用其他在線BASE64編碼功能時,一定要注意它。
 
將轉換后的編碼復制到相應的wxss文件中Background-image: URL ("SVG icon BASE64 encoding")這是代碼
 
.svg{background:url(#);
width:100rpx;
height:100rpx;
background-size: contain
}
它還需要添加background-size: contain屬性使圖標能夠根據元素大小自動縮放
 
然后將其添加到wxss對應的wxml文件中
 
它還需要添加background-size: contain屬性使圖標能夠根據元素大小自動縮放
 
然后將其添加到wxss對應的wxml文件中
 
 <view>
 </view>
編譯效果

2.使用路由地址引入SVG圖標
 
將SVG圖標上傳到網站服務器,并在瀏覽器中輸入SVG圖標的地址,以測試它是否正常打開。

將SVG圖標地址復制到Background-image: URL (SVG icon URL address)如下
 
 
.svg{background:url(http://mt.com/coding.svg);
 width:100rpx;
 height:100rpx;
}
編譯效果

南京小程序開發公司得到最后結論:
 
將SVG圖標BASE64直接編碼為WXSS文件的第一種方法將大大增加微信小程序的大小。如果要更改圖標,則需要重新編譯和上載,這是不推薦的。
 
與第一種方法相比,第二種方法不會增加小程序的大小。當需要更改圖標時,可以將其上傳到服務器。它非常靈活。建議使用第二種方法。

本文地址:http://www./web/2513.html
Tag:
專業服務:南京網站制作,南京網站制作公司,南京網站建設公司
聯系電話:025-65016872
上一篇: 信息圖表如何幫助您更快地吸引潛在客戶
下一篇: 返回列表
最新案例
泰杰賽
泰杰賽
蘇派教育
蘇派教育
全國大學生公共衛生大賽
全國大學生公共衛生大賽
南京德普筒倉建安工程有限公司
南京德普筒倉建安工程有限公司
中國非金屬材料南京礦山工程有限公司
中國非金屬材料南京礦山工程有限公司
你可能感興趣
如何在多個地點發展本地搜索引擎優化
6個白帽連鎖建立B2B戰略
4個用于網站性能的Google Analytics KPI
您需要WordPress CMS網站的7個理由
每個移動電子商務商店需要的功能
您的電子商務商店是否需要自定義WordPress開發?
黑帽SEO詐騙以及如何解決它們
品牌內容與公平內容:您應該使用哪種內容?
最后更新
南京小程序開發公司教你微信程序中SVG的矢量圖標方法 信息圖表如何幫助您更快地吸引潛在客戶 南京小程序開發是如何自定義微信小程序導航欄 承包和建筑行業網站 - 需要關注的重點 南京小程序開發公司闡述Microsoft小部件提交表單操作示例 如何快速構建域權限 南京小程序開發公司解析微信小程序中滑動切換自定義頁碼的方法 南京網站制作為什么說滾動劫持會破壞用戶體驗
服務項目
南京網站制作 營銷型網站 微信營銷 IDC網站 欧美特级a版限制片2018