HTML頁面插入SVG的多種方式

直接使用<svg>標籤插入內容到網頁中，成為DOM的一部分，然後可以使用CSS和JS進行控制。

一個簡單的圓：

 <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的樣式，但屬性與普通的網頁元素不同<style type=text/css> #testSvg {border:1px solid #ccc;} #testSvg circle { fill: red; stroke: blue; stroke-width: 3; }</style>//可以用JS操作SVG，製作簡單的動畫等<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製作動畫效果<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>

展示效果：

可以使用<img> <embed> <object> <iframe>等標籤把SVG文件插入到網頁中。

除<img>外，其他都應該使用雙標籤形式。

 //使用<img>標籤<img src=test.svg' />//或者SVG的base64編碼<img src=data:image/svg+xml;base64,[data] />//使用<embed>標籤<embed id=embedSvg type=image/svg+xml src=test.svg></embed>//獲取SVG DOMvar embedSvg = document.getElementById(embedSvg).getSVGDocument();console.log(SVG DOM: , embedSvg);//使用<object>標籤<object id=objectSvg type=image/svg+xml data=test.svg></object>//獲取SVG DOMvar objectSvg = document.getElementById(objectSvg).getSVGDocument();console.log(SVG DOM: , objectSvg);//使用<iframe>標籤<iframe id=iframeSvg src=test.svg></iframe>//獲取SVG DOMvar iframeSvg = document.getElementById(iframeSvg).contentDocument;console.log(SVG DOM: , iframeSvg);

SVG DOM輸出：

把svg作為其他網頁元素的背景圖片

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

 <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文件實質上就是一段XML文本，因此可以通過讀取XML代碼的方式，讀取SVG源碼。

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

到此這篇關於HTML頁面插入SVG的多種方式的文章就介紹到這了,更多相關html插入svg內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持武林網！