Javascript 画布drawImage内联svg不';我不能在Firefox上工作

Javascript 画布drawImage内联svg不';我不能在Firefox上工作,javascript,firefox,canvas,svg,Javascript,Firefox,Canvas,Svg,下面是一个以svg为例并将其转换为画布的示例: 这在铬合金(51.0)上运行良好。但是在Firefox(47.0.1)上生成一个没有错误的空画布 此示例适用于Firefox,但将图像的src更改为内联svg会产生上面列出的问题。svg图像数据必须具有非百分比的宽度和高度属性。画布html元素还必须设置为显示:块 var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); var svg = docu

下面是一个以svg为例并将其转换为画布的示例:

这在铬合金(51.0)上运行良好。但是在Firefox(47.0.1)上生成一个没有错误的空画布


此示例适用于Firefox,但将图像的src更改为内联svg会产生上面列出的问题。

svg图像数据必须具有非百分比的宽度和高度属性。

画布html元素还必须设置为
显示:块
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)