Problemy z wywoływaniem drawImage() z svg na obiekt kontekstowy w Firefoksie

Question

Zasadniczo chcę przekształcić mój SVG w obraz PNG. Dlatego przekształcam SVG w obraz SVG i próbuję narysować to na płótnie, aby móc go pobrać jako PNG za pomocą metody toDataURL(). To działa dobrze w przeglądarce Chrome, ale w przeglądarce Firefox generuje bardzo nieoczywisty błąd: NS_ERROR_NOT_AVAILABLE

Po przeszukaniu i eksperymentowaniu spróbowałem innego źródła SVG i nagle wszystko działało dobrze. Jakieś pomysły, które mogą sprawić, że metoda zadziała dobrze dla pierwszego ciągu SVG, ale nie powiedzie się dla drugiego? Jak mogę zmienić mój SVG, aby działał?

Fiddle: http://jsfiddle.net/3AXwb/

var image = new Image(); 
image.src = 'data:image/svg+xml,' + escape(xml); 
image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    var context = canvas.getContext('2d'); 
    document.getElementById('container').appendChild(canvas); 
    context.drawImage(image, 0, 0); 
} 

Answer 1

Dodaj atrybut szerokości zewnętrznej <svg> elementu. Na przykład. width = "450" ​​

Pierwszy przypadek ma szerokość i wysokość, druga tylko wysokość, a Firefox wymaga obecnie zarówno szerokości, jak i wysokości.