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);

};