firefox svg canvas drawImage error

我想将外部svg图标转换为base64。它在除Firefox之外的所有浏览器都有效，它会引发错误“NS_ERROR_NOT_AVAILABLE”。firefox svg canvas drawImage error

 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; 
     };

任何人都可以帮助我吗？提前致谢。

来源

2015-02-24 Aneesh

您的svg图标是否具有宽度和高度属性？如果它确实是他们的百分比？ – 2015-02-24 08:02:27

嗨，罗伯特，这是一个svg文件而不是svg dom元素，我们可以为它分配任何宽度/高度。我在页面中使用这个svg作为 – Aneesh 2015-02-24 09:33:22

这不能回答我的问题。 icon.svg是否在根节点' 2015-02-24 09:34:46

Firefox不支持将SVG图像绘制到画布，除非svg文件在根元素<svg>上具有宽度/高度属性，而这些宽度/高度属性不是百分比。这是一个longstanding bug。

您需要编辑icon.svg文件以符合上述标准。

来源

2015-02-24 09:48:54

非常感谢Robert！有用！！ :) – Aneesh 2015-02-24 09:54:10

小心发布该错误的链接？跟踪修复进度会很有趣 – tivoni 2018-01-30 15:39:48

@tivoni我已经添加了一个链接，但是直到w3c定义了应该发生的事情之后，bug才会有进展。 – 2018-01-30 17:02:02

firefox svg canvas drawImage error

回答

相关问题