在Firefox中的画布上下文对象上使用svg调用drawImage()的问题

我基本上想将SVG转换为PNG图像.所以我将SVG转换为SVG图像,并尝试在画布上绘制它,以便能够通过toDataURL()方法将其作为PNG.这在Chrome中运行良好,但在Firefox中它会产生一个非常无意义的错误:NS_ERROR_NOT_AVAILABLE

经过一番搜索和实验,我尝试了一个不同的SVG源,突然间一切正常.任何可能导致该方法对第一个SVG字符串工作正常但第二个字符串失败的想法？如何更改SVG以使其正常工作？

小提琴: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);
}

Robert Longs.. 18

将width属性添加到外部元素.例如width ="450"

第一种情况是宽度和高度,第二种情况是高度,Firefox目前需要宽度和高度.