域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

SVG是一種基于XML語法的圖像格式，接下來通過本文給大家介紹HTML頁面插入SVG的多種方式，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

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

插入svg標(biāo)簽

直接使用 <code><svg></code> 標(biāo)簽插入內(nèi)容到網(wǎng)頁中，成為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)頁元素不同
<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)畫等
<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)畫效果
<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文件

可以使用 <code><img></code> <code><embed></code> <code><object></code> <code><iframe></code> 等標(biāo)簽把SVG文件插入到網(wǎng)頁中。
除 <code><img></code> 外，其他都應(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 DOM
var 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 DOM
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);

//使用<iframe>標(biāo)簽
<iframe id="iframeSvg" src="test.svg"></iframe>
//獲取SVG DOM
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

SVG DOM輸出：

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

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

<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文本，因此可以通過讀取XML代碼的方式，讀取SVG源碼。

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

總結(jié)

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

來源：腳本之家

鏈接：https://www.jb51.net/web/720878.html

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！