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