在HTML5canvas上绘制一个SVG文件
是否有一个默认的方式来绘制一个SVG文件到HTML5canvas上？ Google Chrome浏览器支持将SVG加载为图片（并简单地使用drawImage ），但开发者控制台会警告将该resource interpreted as image but transferred with MIME type image/svg+xml 。
我知道有可能将SVG转换为canvas命令（就像这个问题一样 ），但我希望这不是必须的。 我不在乎旧的浏览器（所以如果FireFox 4和IE 9将支持的东西，这是够好的）。
编辑2014年11月5日
现在可以使用ctx.drawImage 在一些但不是所有浏览器中绘制具有.svg源文件的HTMLImageElements。 Chrome浏览器，IE11和Safari的工作，火狐工作与一些错误（但晚上已经修复了他们）。
var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
现场示例 你应该在canvas上看到一个绿色的方块。 页面上的第二个绿色正方形是插入到DOM中以供参考的相同<svg>元素。
您也可以使用新的Path2D对象来绘制SVG（string）path（ 现在只能在Chrome中运行 ）。 换句话说，你可以写：
var path = new Path2D('M 100,100 h 50 v 50 h 50'); ctx.stroke(path);
在这里的生动的例子。
老后代回答：
本地没有任何东西可以让您在canvas中原生使用SVGpath。 你必须转换自己或使用图书馆为你做。
我build议看看canvg：
您可以通过以下方式轻松地将简单的svg绘制到canvas上：
- 将svg的源以base64格式分配给图像
- 将图像绘制到canvas上
注意：这个方法唯一的反差就是它不能绘制embedded到svg图像。 （见演示）
示范：
（请注意，embedded的图像只在svg可见）
var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // get svg data var xml = new XMLSerializer().serializeToString(svg); // make it base64 var svg64 = btoa(xml); var b64Start = 'data:image/svg+xml;base64,'; // prepend a "header" var image64 = b64Start + svg64; // set it as the source of the img element img.src = image64; // draw the image onto the canvas canvas.getContext('2d').drawImage(img, 0, 0);
svg, img, canvas { display: block; }
SVG <svg height="40"> <rect width="40" height="40" style="fill:rgb(255,0,255);" /> <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image> </svg> <hr/><br/> IMAGE <img/> <hr/><br/> CANVAS <canvas></canvas> <hr/><br/>
Mozilla有一个简单的方法来在canvas上绘制名为“将DOM对象绘制成canvas ”的SVG
正如Simon上面所说，使用drawImage不应该起作用。 但是，使用canvg库和：
var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
这个来自Simon上面提供的链接，其中有一些其他的build议，并指出你想链接到，或者下载canvg.js和rgbcolor.js。 这些允许您在JavaScript函数中通过URL或使用svg标签之间的内联SVG代码来操作和加载SVG。
对不起，我没有足够的声望评论@Matyas答案，但如果svg的图像也在base64中，它将被绘制到输出。
演示：
var svg = document.querySelector('svg'); var img = document.querySelector('img'); var canvas = document.querySelector('canvas'); // get svg data var xml = new XMLSerializer().serializeToString(svg); // make it base64 var svg64 = btoa(xml); var b64Start = 'data:image/svg+xml;base64,'; // prepend a "header" var image64 = b64Start + svg64; // set it as the source of the img element img.onload = function() { // draw the image onto the canvas canvas.getContext('2d').drawImage(img, 0, 0); } img.src = image64;
svg, img, canvas { display: block; }
SVG <svg height="40"> <rect width="40" height="40" style="fill:rgb(255,0,255);" /> <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image> </svg> <hr/><br/> IMAGE <img/> <hr/><br/> CANVAS <canvas></canvas> <hr/><br/>
