Dynamische Anhängung des SVG-Sprites in der Chrome-Erweiterung

Question

In meiner Chrome-Erweiterung versuche ich, ein SVG-Sprite anzuzeigen, aber es zeigt den Inhalt nicht an. Ich sehe keine Fehler in der Konsole und habe sowohl lokal als auch online versucht. Ich habe auch versucht, ein IMG-Tag ohne Erfolg zu verwenden. Alle anderen Ratschläge, die ich gefunden habe, sprechen über die Konstruktion der Formen.

var svg = div.appendChild(document.createElement("svg")); 
    svg .classList.add("actionButtonImage"); 
var use = svg.appendChild(document.createElement("use")); 
    use .setAttribute("xmlns:xlink"," http://www.w3.org/1999/xlink"); 
    use .setAttribute("xlink:href", href); 

EDIT: Ich bin nicht die Vektoren in Seite zu machen, ich bin mit externer SVG Sprites! Und habe einen Tag damit verbracht, dies zu erforschen!

---

Bisher habe ich dies ohne Erfolg

var svg = div.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg")); 
    svg .classList.add("actionButtonImage"); 
var use = svg.appendChild(document.createElementNS("http://www.w3.org/1999/xlink", "use" )); 
    use .setAttributeNS("http://www.w3.org/1999/xlink","href",href); 

Answer 1

Sie nicht SVG-Elemente mit createelement erstellen können, müssen Sie createElementNS und namespace die SVG liefern.

Ebenso kann setAttribute nicht zum Festlegen eines Attributs im xlink-Namespace verwendet werden. Sie können nur Attribute im NULL-Namespace erstellen. Sie müssten setAttributeNS verwenden, um Attribute im xlink-Namespace festzulegen.

Schließlich ist xmlns: xlink kein echtes Attribut, es wird von Serialisierern als Nebeneffekt von Attributen und Elementen erstellt, die korrekt in Namespaces erstellt werden, so dass Sie setAttribute nicht verwenden müssen, um es zu erstellen.