負載事件偵聽不火WebKit中的SVG圖像元素

Question

這是verrrrry類似於現有的一些問題：

javascript, image onload() doesnt fire in webkit if loading same image

image.onload event and browser cache

除了不是試圖加載HTML圖像，我正在使用svg圖像。我在頁面上有一個SVG元素和一個包含數據URI字符串的變量。我想創建一個圖像元素，將其設置爲顯示數據URI，並將其添加到頁面上的SVG元素。這是我的代碼：

var svg=document.getElementsByTagName('svg')[0] 
var placed=document.createElementNS("http://www.w3.org/2000/svg", 'image') 
placed.addEventListener('load',function(){ 
    alert('loaded') 
}) 
placed.setAttribute("href",test) 
placed.setAttribute("x",100) 
placed.setAttribute("y",100) 
placed.setAttribute("height",100) 
placed.setAttribute("width",100) 
svg.appendChild(placed); 

其中test是數據URI。這在Firefox和Chrome瀏覽器中正常啓動（並且圖像加載正常）。它在Safari中不會啓動。我認爲這與上面鏈接的SO問題是相同的問題，但試圖按照某些答案中的建議「清除」變量似乎沒有做任何事情，而且我想知道是否需要做更多的事情。

這裏是一個應該在Safari工作在Firefox/Chrome的偉大，沒有那麼大的小提琴：

https://jsfiddle.net/362pbcLn/

如果這是事實，同樣的緩存問題，我需要什麼做清除變量並讓Safari來觸發負載監聽器？

Answer 1

對於Safari瀏覽器（和Firefox），你需要在href二傳手改變

placed.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",test) 

Firefox將可能支持簡化的HREF只有語法相當快，但我們沒有理由使用它上面的Chrome和工作線IE Edge也是如此。