这是一个示例的代码片段,它可以将SVG转换为Canvas:http://jsfiddle.net/Na6X5/944/
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var svg = document.getElementById('mySVG');
var img = new Image();
img.onload = function() {
console.log(img.width, img.height)
document.getElementById('canvas1').width = 300
document.getElementById('canvas1').height = 200
ctx.drawImage(img, 0, 0, 300, 200);
}
img.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML)
这在Chrome(51.0)上运行正常,但在Firefox(47.0.1)上会产生一个空画布,且没有错误。
这个例子在Firefox上运行正常,链接为http://codepen.io/keithwyland/pen/umova,但将图像的src更改为内联svg会产生上述问题,链接为http://codepen.io/Ewhite613/pen/YWZoGy。
display:block
。 - jjz