SVG und Javascript

Externe SVG-Datei im iframe laden

In einer SVG-Datei muss der Script-Code zwischen dem öffnenden und schließenden CDATA liegen, damit es nicht zu Kollisionen zwischen SVG und Script kommt.

<script>
<![CDATA[
   …
   document.querySelector('#shadow').setAttribute('transform','translate(' + x + ',' + y+ ')');
   …
]]>
</script>

<iframe src="farbraum-interaktiv.svg"></iframe>

Quelle Grafik Farbraum-Vergleich: Farbe auf Wisotop

SVG mit Javascript inline

Wenn SVG-Elemente durch ein Script erzeugt werden, dann kommt der Namespace zum Einsatz.

createElementNS (namespaceURI, qualifiedName)
createAttributeNS (namespaceURI, qualifiedName)

So wird ein SVG-Element on the fly mit Javascript erzeugt:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('viewBox','0 0 200 200');
svg.setAttribute('width','240');
svg.setAttribute('height','240');
var svguse = document.createElementNS("http://www.w3.org/2000/svg",'use');
svguse.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#koenig");
svg.appendChild (svguse);
document.querySelector('.picto').appendChild(svg);

und platziert ein SVG-Element mit einem use – eine Referenz auf ein anderes Element (einen »Klon«).

SVG und innerHTML

SVG hatte lange Zeit kein innerHTML – eigentlich klar. textContent erfüllt denselben Zweck, setzt nur reinen Text ein, aber keine SVG-Elemente.

Zwar erzeugt document.createElementNS ebenfalls SVG-Elemente, aber innerHTML ist einfach unschlagbar schlicht.

<svg viewBox="0 0 200 200" width="100%" height="100%">
	<g id="smilie">
	</g>
</svg>

const smilie = document.querySelector("#smilie");
smilie.innerHTML = "<circle cx='100' cy='100' r='50' stroke='orange' stroke-width='10' />";
smilie.innerHTML += "<circle cx='80' cy='80' r='10' fill='orange' />";
smilie.innerHTML += "<circle cx='120' cy='80' r='10' fill='orange' />";
smilie.innerHTML += "<path d='M 72 110 A 30 30 0 0 0 128 110' stroke='orange' stroke-width='10' stroke-linecap='round'/>";