web應(yīng)用開發(fā)使用svg圖片，總結(jié)了下，可以有如下4種方式： 1. 直接插入頁面。 1. 直接插入頁面在html頁面，可以直接使用svg標(biāo)簽。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 一個(gè)svg圖片 --> <svg width="200" height="150" style="border: 1px solid steelblue"> <!-- 里面有一個(gè)矩形 --> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> </body> </html> 運(yùn)行效果：
2. img標(biāo)簽引入除了在網(wǎng)頁里直接寫svg標(biāo)簽，也可以通過img引入，就像引入jpeg、png圖片一樣。 1）新建svg圖片 那么我們就要先新建一個(gè)svg圖片文件，我們把上面直接寫在網(wǎng)頁里的svg拿來用： <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"> <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect> </svg> 這邊內(nèi)容有兩點(diǎn)不一樣： 1. 需要聲明命名空間 xmlns 這個(gè)屬性，命名空間可以本文尾部列出的參考資料。 把內(nèi)容保存到test.svg文件，這個(gè)就是一張圖片文件了，可以嘗試在瀏覽器打開看看。 2）使用img標(biāo)簽引入 假設(shè)test.svg和網(wǎng)頁文件在同一個(gè)目錄下： <img src="test.svg" style="border: 1px solid steelblue" /> 和引入jpeg、png類似，直接src屬性設(shè)置圖片路徑即可，另外我們把原先在svg的樣式移到了img標(biāo)簽這邊。 運(yùn)行效果和上面是一樣的：
現(xiàn)在網(wǎng)上有很多svg做的圖片，可以參考：https://www.iconfont.cn，一個(gè)不錯(cuò)的icon圖標(biāo)網(wǎng)站。
3. css引入css引入就是把圖片當(dāng)成背景圖引入： <style type="text/css">
.svg {
width: 200px;
height: 150px;
border: 1px solid steelblue;
background-image: url(test.svg); // 當(dāng)成背景引入
}
</style>
<div class="svg"></div>4. object引入和img引入類似，需要一個(gè)svg文件，然后用屬性data引入： <object data="test.svg" style="border: 1px solid steelblue"></object> 運(yùn)行效果和上面類似，就不再貼圖。 |
免責(zé)聲明：本站部分文章和圖片均來自用戶投稿和網(wǎng)絡(luò)收集，旨在傳播知識(shí)，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系我們及時(shí)修正或刪除。謝謝！
始終以前瞻性的眼光聚焦站長、創(chuàng)業(yè)、互聯(lián)網(wǎng)等領(lǐng)域，為您提供最新最全的互聯(lián)網(wǎng)資訊，幫助站長轉(zhuǎn)型升級(jí)，為互聯(lián)網(wǎng)創(chuàng)業(yè)者提供更加優(yōu)質(zhì)的創(chuàng)業(yè)信息和品牌營銷服務(wù)，與站長一起進(jìn)步！讓互聯(lián)網(wǎng)創(chuàng)業(yè)者不再孤獨(dú)！
掃一掃，關(guān)注站長網(wǎng)微信
大家都在看
