SVG und Javascript

Javascript für SVG

SVG eignet sich gut für die Darstellung von Graphen, Statistiken und Auswertungen.

18-12-15 SITEMAP

Javascript in externer SVG-Datei

Wenn SVG in einer externen SVG-Datei gespeichert wird, muss das Script in die SVG-Datei, damit Javascript Elemente ansprechen kann und die SVG-Datei muss mit einem iframe oder object-Element in die Seite eingebunden werden.

Die Script-Anweisungen müssen in CDATA-Tags liegen, sonst kommt es zu Kollisionen zwischen SVG und Script.

This page contains the following errors:
error on line 51 at column 9: StartTag: invalid element name
Below is a rendering of the page up to the first error.
<script>
<![CDATA[
   …
   document.querySelector('#shadow').setAttribute('transform','translate(' + x + ',' + y+ ')');
   …
]]>
</script>

Die ganz normalen Anweisungen des DOMs funktionieren mit SVG: createAttribute, setAttribute, …

Die SVG-Datei muss mit einem object- oder iframe-Tag geladen werden. Mit einem HTML img-Tag zeigen die Browser die reine SVG-Grafik an, aber führen das Script nicht aus.

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

Quelle Grafik Farbraum-Vergleich: Farbe auf Wisotop

SVG mit Javascript in HTML-Seiten

Javascript funktioniert selbstverständlich auch, wenn SVG in die HTML-Seite eingebettet ist und muss nicht als <![CDATA[-Sektion ausgewiesen werden. Ebensogut kann das Skript aus dem SVG-Tag herausgenommen und auch in eine externe Javascript gesteckt werden.

So weit so gut. Wenn SVG erst auf der HTML-Seite durch ein Script erzeugt wird, 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 erzeugt ein SVG-Element mit einem use – eine Referenz auf ein anderes Element (einen »Klon«).

SVG hat kein innerHTML

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

SVG Graph mit Javascript
let circle = document.createElementNS ("http://www.w3.org/2000/svg","circle");
circle.setAttribute ("cx", x);
circle.setAttribute ("cy", y);
circle.setAttribute ("r", "1.5");
circle.setAttribute ("style", data[i].nb_visits);
document.querySelector("svg").appendChild (circle);

let text = document.createElementNS ("http://www.w3.org/2000/svg","text");
text.setAttribute ("x", x + 3);
text.setAttribute ("y", y);
text.setAttribute ("font-size", 4);
text.textContent = data[i].nb_visits;
document.querySelector("svg").appendChild (text);
100 200 300 400 500 600 700 800 900 09.08 10.08 11.08 12.08 13.08 14.08 15.08 16.08 17.08 18.08 19.08 20.08 21.08 22.08 23.08 24.08 25.08 26.08 27.08 28.08 29.08 30.08 31.08 01.09 02.09 03.09 04.09 05.09 06.09 07.09