javascript - Firefox 使用 drawImage 将 SVG 图像渲染到 HTML5 Canvas 时出错

Question

我正在尝试使用 Canvas 将外部 svg 图标转换为 base64 png。它适用于除 Firefox 之外的所有浏览器，Firefox 会抛出错误“NS_ERROR_NOT_AVAILABLE”。

var img = new Image();
img.src = "icon.svg";

img.onload = function() {
    var canvas = document.createElement("canvas");              
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
};

有人可以帮我解决这个问题吗？提前致谢。

Answer 1

Firefox 不支持将 SVG 图像绘制到 Canvas ，除非 svg 文件在根目录中具有宽度/高度属性 <svg>元素和那些宽度/高度属性不是百分比。这是 longstanding bug .

您需要编辑 icon.svg 文件，使其符合上述条件。