網頁中嵌入SVG代碼,并保留顏色編輯屬性

來源:【易網】網站設計公司 | 更新:2018-08-24

svg作為H5時代下的矢量圖,在沒有小圖標上運用SVG,相比用png,體積和清晰度方面更有優勢,本文介紹直接在網頁中用data:image/svg+xml方法嵌入svg圖片代碼,需借助AI軟件!

svg作為H5時代下的矢量圖,在沒有小圖標上運用SVG,相比用png,體積和清晰度方面更有優勢,本文介紹直接在網頁中用data:image/svg+xml方法嵌入svg圖片代碼,需借助AI軟件!

111111111500115021_wx.jpg

先看代碼:

<style>
    .ecomcn {
        width: 20px; height: 20px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.34 200.34"><polygon fill="#cc0000" points="200.34 12.39 187.95 0 100.17 87.78 12.39 0 0 12.39 87.78 100.17 0 187.95 12.39 200.34 100.17 112.56 187.95 200.34 200.34 187.95 112.56 100.17 200.34 12.39"/></svg>') no-repeat center; background-size: 100%;
    }
</style>
svg代碼嵌入效果:
<div class="ecomcn"></div>

分析這里的圖片代碼:

其中 viewBox="0 0 200.34 200.34" 與 <polygon fill="#cc0000" points="200.34 12.39 187.95 0 100.17 87.78 12.39 0 0 12.39 87.78 100.17 0 187.95 12.39 200.34 100.17 112.56 187.95 200.34 200.34 187.95 112.56 100.17 200.34 12.39"/> 來自于ai文件(文件-導出-導出為-選擇svg-導出),左下角點擊“顯示代碼”;fill="#cc0000" 是后加代碼,可以設置svg為一個自定義顏色的單色圖片。(下圖為從AI中得到的svg圖片代碼)

QQ拼音截圖20180824083004.png

拷貝從AI中得到的代碼片段替換即可!

Ps.圖形不宜太復雜,AI文件內元素建議聯集處理(路徑查找器-聯集),以壓縮文件體積。注意一定要加引號 'data:image …'。此方法暫不支持IE ^^

排球比赛可以没有自由人吗