Leinwand drawImage Inline-svg funktioniert nicht auf Firefox

Question

Hier eine Geige eines Beispiels ist, die eine svg nimmt und verwandelt es in eine Leinwand: 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) 

Dies funktioniert gut auf Chrome (51,0). Aber erzeugt eine leere Leinwand in Firefox (47.0.1) ohne Fehler.

Dieses Beispiel funktioniert auf Firefox http://codepen.io/keithwyland/pen/umova aber die src des Bildes auf einen Inline-SVG-Wechsel erzeugt das Problem der oben aufgeführt http://codepen.io/Ewhite613/pen/YWZoGy

Answer 1

Die SVG Bilddaten müssen Breite und Höhe Attribute, die nicht Prozentsatz.