SVG入门 - javascript操作

DOM操作

svg看起来是一个整体，但是如果svg代码直接写在HTML页面之中，它就成为页面DOM的一部分，可以直接用DOM操作。

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <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;
}

也可以用JS来操作DOM：

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

注意，如果使用标签插入 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>
</div>

使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。

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