SVG-JS操作

JavaScript操作

DOM操作

如果 SVG 代碼直接寫在 HTML 網頁之中，它就成為網頁 DOM 的一部分，可以直接用 DOM 操作。

<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>

上面代碼插入網頁之后，就可以用 CSS 定制樣式。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

然后，可以用 JavaScript 代碼操作 SVG。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
}, false);

上面代碼指定，如果點擊圖形，就改寫circle元素的r屬性。

獲取 SVG DOM

使用<object>、<iframe>、<embed>標簽插入 SVG 文件，可以獲取 SVG DOM。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();

!> 注意，如果使用<img>標簽插入 SVG 文件，就無法獲取 SVG DOM。

讀取 SVG 源碼

由於 SVG 文件就是一段 XML 文本，因此可以通過讀取 XML 代碼的方式，讀取 SVG 源碼。

<div id="svg-container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve" width="500" height="440"
  >
    <!-- svg code -->
  </svg>
</div>

使用XMLSerializer實例的serializeToString()方法，獲取 SVG 元素的代碼。

var svgString = new XMLSerializer()
  .serializeToString(document.querySelector('svg'));

SVG 圖像轉為 Canvas 圖像

首先，需要新建一個Image對象，將 SVG 圖像指定到該Image對象的src屬性。

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;

然后，當圖像加載完成后，再將它繪制到 元素。

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};