Svg操作

SVG文件的JavaScript操作

获取SVG DOM

如果使用img标签插入SVG文件，则无法获取SVG DOM。使用object、iframe、embed标签，可以获取SVG DOM。

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

 

由于svg文件就是一般的XML文件，因此可以用DOM方法，选取页面元素。

// 改变填充色
document.getElementById("theCircle").style.fill = "red";

// 改变元素属性
document.getElementById("theCircle").setAttribute("class", "changedColors");

// 绑定事件回调函数
document.getElementById("theCircle").addEventListener("click", function() {
   console.log("clicked")
});

 

读取svg源码

由于svg文件就是一个XML代码的文本文件，因此可以通过读取XML代码的方式，读取svg源码。

假定网页中有一个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图像

首先，需要新建一个img对象，将svg图像指定到该img对象的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;

 

然后，当图像加载完成后，再将它绘制到canvas元素。

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