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

Question

我基本上想将我的 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);
}

Answer 1

为外部<svg> 元素添加宽度属性。例如。宽度=“450”

第一种情况有宽度和高度，第二种只有高度，Firefox 目前需要同时存在宽度和高度。