Bild in Svg-Element ändern

Question

Ich versuche, ein vorhandenes SVG-Element in einem HTML-Dokument zu ändern. Ich habe folgendes:

<svg class="logo" viewBox="0 0 435 67"> <!-- IMAGE DIMENSIONS -->  
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo--someLogo"></use> 
</svg> 

Ich denke, es ist, dass sein muss xlink:href="#logo--someLogo" aber wenn ich versuche es über den Browser mit SVG-Datei zu ändern oder .png wie

$('.logo use').attr('xlink:href', "//someurl.com.png"); 

es tut zeige alles.

Also ich frage mich, wie ich das xlink:href mit einer anderen Quelle ändern kann.

Answer 1

vielleicht gibt es native Methoden für diese Art von Dokumentknoten, aber das funktioniert auch (wenn es nur ein Use-Tag gibt).

document.getElementsByTagName('use')[0].setAttribute('xlink:href', 'link_to_another_image') 

Answer 2

Nach einigem Graben ich, dass die Art und Weise svg Verwendung heraus, dass es in der DOM funktioniert, ist ein Symbol Tag ist, dass diese Ressource angegeben entspricht xlink: href. In diesem Tag gibt es einen Pfad Element, in dem der Ressourcenpfad angegeben werden muss.

verwenden ich ein JPEG zu SVG Konverter den Pfad des Bildes zu erhalten, und es scheint, als zu arbeiten, um den Weg in dem Symbol Elemente im DOM zu ersetzen.