如果使用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文件就是一个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‘));
首先，需要新建一个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); };
原文：http://www.cnblogs.com/rubekid/p/4889812.html