Canvas drawImage内联svg在Firefox上不起作用

Question

这是一个示例的小提琴，它将svg转换为画布：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

Answer 1

SVG图像数据的宽度和高度属性必须不是百分比。