javascript - 在 Firefox 的 Canvas 上下文对象上使用 svg 调用 drawImage() 时出现问题

Question

我基本上想将我的 SVG 转换为 PNG 图像。因此，我将 SVG 转换为 SVG 图像并尝试将其绘制在 Canvas 上，以便能够通过 toDataURL() 方法将其作为 PNG 格式获取。这在 Chrome 中工作正常，但在 Firefox 中它会产生一个非常无意义的错误:NS_ERROR_NOT_AVAILABLE

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

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

在外层添加宽度属性<svg>元素。例如。宽度="450"

第一种情况有宽度和高度，第二种情况只有高度，而 Firefox 目前要求宽度和高度都存在。