Last Eventlistener feuert nicht in Webkit für svg Bildelement

Question

Dies ist verrrrry ähnlich wie einige bestehenden Fragen:

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

image.onload event and browser cache

dass außer anstatt zu versuchen, ein HTML-Bild zu laden, ich arbeite mit einem SVG-Bild. Ich habe ein SVG-Element auf der Seite und eine Variable, die eine Daten-URI-Zeichenfolge enthält. Ich möchte ein Bildelement erstellen, es zum Anzeigen des Daten-URI einrichten und es dem SVG-Element auf der Seite hinzufügen. Hier ist mein Code:

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

Wo Test ist die Daten-URI. Dies wird in Firefox und Chrome ordnungsgemäß ausgelöst (und das Bild wird ordnungsgemäß geladen). Es feuert nicht in Safari. Ich nehme an, das ist das gleiche Problem wie die SO-Fragen, die ich oben verlinkt habe, aber der Versuch, die Variable zu 'löschen', wie in einigen dieser Antworten vorgeschlagen, scheint nichts zu tun und ich frage mich, ob ich etwas mehr tun muss.

Hier ist eine Geige, die in Firefox/Chrome groß funktionieren sollen, nicht so groß in Safari:

https://jsfiddle.net/362pbcLn/

Wenn dies in der Tat ist das gleiche Cache-Problem, was muß ich das klar machen Variable und erhalten Safari den Load Listener auszulösen?

Answer 1

Für Safari (und Firefox) können Sie den href Setter

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

Firefox wird wahrscheinlich unterstützen die vereinfachte href nur Syntax recht bald, aber es gibt keinen Grund, es zu verwenden, um die Linie über Arbeiten auf Chrome ändern müssen und IE Edge auch.