CSS, HTML und Javascript mit {stil}

SVG und Javascript

SVG mit Javascript scripten und animieren

SVG kann mit Javascript genauso gescriptet werden wie HTML: Elemente einfügen, Attribute ändern, Stile ändern und SVG animieren.

Scripte können direkt in der SVG-Datei sitzen, bei Inline-SVG in HTML-Seiten innerhalb des SVG-Tags oder im HTML der Seite.

Javascript-Librarys für SVG gibt es in jeder Größenordnung – von SnapSVG über Velocity.js bis hin zu kleinen spezialisieren Librarys wie Vivus.

SVG wird genauso wie HTML durch das DOM (Document Object Model) beschrieben – wer HTML mit Javascript manipulieren kann, kann auch SVG mit Javascript ändern und anpassen.

var f1 = document.getElementById('fluegel1');
f1.setAttribute('transform','translate(210,120) rotate(0)');
var f2 = document.getElementById('fluegel2');
f2.setAttribute('transform','translate(240,120) rotate(0)');

Da SVG durch das DOM dargestellt wird, können Elemente durch ihre ID erreicht werden. Der Slider ist ein HTML range-Slider und bestimmt die Frequenz des Flügelschlags.

var flybird = setInterval (function () {
   var y = Math.sin(20*speed) * 10;
   f1.setAttribute('transform', 'translate(210,120) rotate(' + y + ')');
   f2.setAttribute('transform', 'translate(240,120) rotate(' + -y + ')');
   speed = speed - dyna;
},60);

Für kleine Aufgaben lohnt es sich also nicht unbedingt, gleich mit einer Library anzurücken.

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.

Die 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 Image-Tag zeigen die Browser die Grafik an, aber führen das Script nicht aus.

<object data="on-the-beach.svg" type="image/svg+xml" width="600">
</object>

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 (»Klone«).