HTML頁面插入SVG的多種方式

佚名發表於2020-05-19
HTMLSVG

SVG是一種基於XML語法的影像格式，接下來透過本文給大家介紹HTML頁面插入SVG的多種方式，透過例項程式碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑑價值，需要的朋友參考下吧

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

插入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>

展示效果：

在這裡插入圖片描述

插入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 DOM
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
         
//使用<object>標籤
<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>標籤
<iframe id="iframeSvg" src="test.svg"></iframe>
//獲取SVG DOM
var 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原始碼

因為SVG檔案實質上就是一段XML文字，因此可以透過讀取XML程式碼的方式，讀取SVG原始碼。

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

總結

到此這篇關於HTML頁面插入SVG的多種方式的文章就介紹到這了,更多相關html插入svg內容請搜尋以前的文章或繼續瀏覽下面的相關文章

相關文章