SVG符號不會觸發onload事件（僅在Firefox中）。我正在尋找解決方法

我正在使用D3.js在項目中使用SVG製作圖表。該圖使用SVG符號。我有JavaScript代碼來管理這些項目與onload事件。SVG符號不會觸發onload事件（僅在Firefox中）。我正在尋找解決方法

在諸如webkit引擎瀏覽器的瀏覽器中運行得非常好。但Firefox ... Firefox不會將任何onload事件運行到SVG中。

嗯，我看到了錯誤，並認爲Firefox是免費軟件，這些人喜歡錯誤跟蹤。我已經上傳了bug https://bugzilla.mozilla.org/show_bug.cgi?id=1254159。

而這些人的迴應是「WONTFIX」。

用於檢查錯誤的例子是微小的，明確的：

<html> 
    <head> 
     <title>test onload event in a svg symbol</title> 
     <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="all" width="500px" height="500px" style="background: #ffff00;"> 
      <g class="cat" transform="translate(100 100)"> 
       <use xlink:href="animals.svg#cat" onload="javascript: console.log('This message is not showed in firefox.');" /> 
      </g> 
     </svg> 
     <script type="text/javascript"> 
      d3.select("svg") 
       .append("g") 
        .attr("class", "dog") 
        .attr("transform", "translate(200 200) scale(0.5)") 
        .append("use") 
         .attr("xlink:href", "animals.svg#dog") 
         .on("load", function() { 
          console.log("And this message is not showed in firefox too."); 
         }); 
     </script> 
    </body> 
</html>

最後，我期待在W3C文件和符號事件的onload是標準：https://www.w3.org/TR/SVG/struct.html#UseElement

大家有一種變通方法爲了這？

來源

2016-03-08 tres.14159

把你的代碼外'

但SVG裝，並且javascript在動態添加了其他符號，例如通過javascript將圖像添加到網絡中。正如您在代碼的第二個示例中看到的那樣。 –

讓animals.svg文件在其加載的父級html文件中調用某個函數事件。 –

解決這個問題的一個長途是處理外部資源的加載問題（或者在d3的幫助下）。

D3具有XML加載函數（https://github.com/mbostock/d3/wiki/Requests#d3_xml）和SVG是XML的，所以你可以做到以下幾點：

準備不使用外部資源
使用D3加載SVG內容
在d3.xml的回調函數中，您會得到一個DOML元素：將其插入圖形中的相關位置，並執行您在「onload」事件中所做的任何工作。

（有可能是一個更簡單的方法，我只是不「知道這件事）

來源

2016-03-08 08:39:09 tarulen

SVG符號不會觸發onload事件（僅在Firefox中）。我正在尋找解決方法

回答

相關問題