svg- und use-Element mit JavaScript erzeugen

SVG-Elemente dynamisch über JavaScript zu erstellen ist gar nicht so einfach, wie ich erst dachte … In diesem Beitrag zeige ich, wie sich mit JS ein SVG-Element erzeugen lässt, das über ein use-Element ein Symbol anzeigt.

Vorbemerkung

SVG-Elemente lassen sich unter anderem wie folgt anzeigen:

<svg>
    <use xlink:href="#down-arrow"></use>
</svg>
Code-Sprache: HTML, XML (xml)

Dabei verweisen wir in dem use-Element auf ein Element, das wir anzeigen möchten (diese drei Zeilen sind das Markup, das per JavaScript erstellt werden soll). In meinem konkreten Fall wird dadurch ein nach unten zeigender Pfeil dargestellt, der inline innerhalb der Seite so vorliegt:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="hannover-svg-icons">
    <symbol viewBox="0 0 16 16" id="down-arrow">
        <polygon points="11,6 7.5,9.5 4,6 3,7 7.5,11.5 12,7"></polygon>
    </symbol>
</svg>
Code-Sprache: HTML, XML (xml)

Die id des symbol-Elements entspricht dabei dem Wert, den wir für xlink:href angegeben haben.

Das Erstellen mit JavaScript

Wenn man einmal weiß worauf man achten muss, ist es gar nicht so schwer. Das hier ist der komplette Code:

var svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
	useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');

useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#down-arrow');

svgElem.appendChild(useElem);
Code-Sprache: JavaScript (javascript)

Ziemlich übersichtlich, oder? Wichtig zu wissen ist, dass zur Erstellung von svg- und use-Element document.createElementNS mit dem richtigen Namespace genutzt werden muss – document.createElement funktioniert nicht. Gleichfalls muss für das xlink:href-Attribut die setAttributeNS-Methode statt setAttribute genutzt werden – auch hier muss wieder auf den Namespace geachtet werden.

Nachdem dieser Code ausgeführt ist, haben wir in svgElem das SVG-Element mit use und können es zum Beispiel per appendChild einem Element zuweisen, das bereits auf der Website vorhanden ist.