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'/>";