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

回答

相關問題