SVG (Scalable Vector Graphics) 可縮放矢量圖，是一種基于XML語(yǔ)法的圖像格式。其他圖像格式都是基于像素處理的，SVG則是屬于對(duì)圖像的形狀描述，所以它本質(zhì)上是文本文件，體積相對(duì)較小，且放大時(shí)也不會(huì)失真。
插入svg標(biāo)簽
直接使用 <svg> 標(biāo)簽插入內(nèi)容到網(wǎng)頁(yè)中，成為DOM的一部分，然后可以使用CSS和JS進(jìn)行控制。
一個(gè)簡(jiǎn)單的圓：
<svg width="400" heihgt="300" id="testSvg"> <circle cx="100" cy="100" r="50" fill="red" stroke="black" strock-width="2" id="testCircle"></circle></svg>//可以用CSS控制SVG的樣式，但屬性與普通的網(wǎng)頁(yè)元素不同<style type="text/css"> #testSvg {border:1px solid #ccc;} #testSvg circle { fill: red; stroke: blue; stroke-width: 3; }</style>//可以用JS操作SVG，制作簡(jiǎn)單的動(dòng)畫(huà)等<script type="text/javascript"> var circle = document.getElementById("testCircle"); circle.addEventListener("click", function(e) { console.log("Click circle ..."); circle.setAttribute("r", 65); }, false);</script>//除了用JS操作外，可以用SVG自帶的animate制作動(dòng)畫(huà)效果<svg width="400" height="300" id="testSvg"> <circle cx="100" cy="100" r="50" id="testCircle"> <animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate> </circle></svg>展示效果：
插入svg文件
可以使用 <img> <embed> <object> <iframe> 等標(biāo)簽把SVG文件插入到網(wǎng)頁(yè)中。
除 <img> 外，其他都應(yīng)該使用雙標(biāo)簽形式。
//使用<img>標(biāo)簽<img src="test.svg'" />//或者SVG的base64編碼<img src="data:image/svg+xml;base64,[data]" />//使用<embed>標(biāo)簽<embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>//獲取SVG DOMvar embedSvg = document.getElementById("embedSvg").getSVGDocument();console.log("SVG DOM: ", embedSvg); //使用<object>標(biāo)簽<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>//獲取SVG DOMvar objectSvg = document.getElementById("objectSvg").getSVGDocument();console.log("SVG DOM: ", objectSvg);//使用<iframe>標(biāo)簽<iframe id="iframeSvg" src="test.svg"></iframe>//獲取SVG DOMvar iframeSvg = document.getElementById("iframeSvg").contentDocument;console.log("SVG DOM: ", iframeSvg);SVG DOM輸出：
把svg作為其他網(wǎng)頁(yè)元素的背景圖片
這是一種變相的把svg插入網(wǎng)頁(yè)的方式，即把svg作為普通的圖片使用，無(wú)法展示動(dòng)畫(huà)效果。
<style type="text/css"> .svg-div { width:400px; height:300px; background:url("test.svg") no-repeat center / 50%; border:1px solid #ccc; }</style><div class="svg-div"></div>效果：
讀取SVG源碼
因?yàn)镾VG文件實(shí)質(zhì)上就是一段XML文本，因此可以通過(guò)讀取XML代碼的方式，讀取SVG源碼。
var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));console.log(svgStr);總結(jié)
到此這篇關(guān)于HTML頁(yè)面插入SVG的多種方式的文章就介紹到這了,更多相關(guān)html插入svg內(nèi)容請(qǐng)搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
