SVG (Scalable Vector Graphics) 可縮放矢量圖，是一種基于XML語法的圖像格式。其他圖像格式都是基于像素處理的，SVG則是屬于對圖像的形狀描述，所以它本質(zhì)上是文本文件，體積相對較小，且放大時也不會失真。

插入svg標(biāo)簽

直接使用 標(biāo)簽插入內(nèi)容到網(wǎng)頁中，成為DOM的一部分，然后可以使用CSS和JS進(jìn)行控制。

一個簡單的圓：

//可以用CSS控制SVG的樣式，但屬性與普通的網(wǎng)頁元素不同

#testSvg {border:1px solid #ccc;}

#testSvg circle {

fill: red;

stroke: blue;

stroke-width: 3;

}

//可以用JS操作SVG，制作簡單的動畫等

var circle = document.getElementById("testCircle");

circle.addEventListener("click", function(e) {

console.log("Click circle ...");

circle.setAttribute("r", 65);

}, false);

//除了用JS操作外，可以用SVG自帶的animate制作動畫效果

展示效果：

插入svg文件

可以使用 等標(biāo)簽把SVG文件插入到網(wǎng)頁中。

除 外，其他都應(yīng)該使用雙標(biāo)簽形式。

//使用標(biāo)簽

//或者SVG的base64編碼

//使用標(biāo)簽

//獲取SVG DOM

var embedSvg = document.getElementById("embedSvg").getSVGDocument();

console.log("SVG DOM: ", embedSvg);

//使用標(biāo)簽

//獲取SVG DOM

var objectSvg = document.getElementById("objectSvg").getSVGDocument();

console.log("SVG DOM: ", objectSvg);

//使用標(biāo)簽

//獲取SVG DOM

var iframeSvg = document.getElementById("iframeSvg").contentDocument;

console.log("SVG DOM: ", iframeSvg);

SVG DOM輸出：

把svg作為其他網(wǎng)頁元素的背景圖片

這是一種變相的把svg插入網(wǎng)頁的方式，即把svg作為普通的圖片使用，無法展示動畫效果。

.svg-div {

width:400px;

height:300px;

background:url("test.svg") no-repeat center / 50%;

border:1px solid #ccc;

}

效果：

讀取SVG源碼

因?yàn)镾VG文件實(shí)質(zhì)上就是一段XML文本，因此可以通過讀取XML代碼的方式，讀取SVG源碼。

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));

console.log(svgStr);

總結(jié)

到此這篇關(guān)于HTML頁面插入SVG的多種方式的文章就介紹到這了,更多相關(guān)html插入svg內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的在html页面中加入矢量图,HTML页面插入SVG的多种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。