Sự cố khi gọi drawImage() với svg trên đối tượng bối cảnh canvas trong Firefox

Question

Tôi về cơ bản muốn chuyển đổi SVG của tôi thành hình ảnh PNG. Vì vậy, tôi biến SVG thành hình ảnh SVG và cố gắng vẽ hình ảnh đó trên canvas để có thể lấy nó dưới dạng PNG thông qua phương thức toDataURL(). Điều này làm việc tốt trong Chrome, nhưng trong Firefox nó tạo ra một lỗi rất không hợp lý: NS_ERROR_NOT_AVAILABLE

Sau khi tìm kiếm và thử nghiệm một chút, tôi đã thử một nguồn SVG khác và tất cả mọi thứ đột ngột hoạt động tốt. Bất kỳ ý tưởng nào có thể khiến phương thức hoạt động tốt cho chuỗi SVG đầu tiên nhưng không thành công cho chuỗi thứ hai? Làm thế nào tôi có thể thay đổi SVG để nó hoạt động?

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

Thêm một thuộc tính chiều rộng đến <svg> yếu tố bên ngoài. Ví dụ. width = "450" ​​

Trường hợp đầu tiên có chiều rộng và chiều cao, chiều cao chỉ thứ hai và Firefox hiện cần cả chiều rộng và chiều cao.