5.4 Animationen und Interaktionen

Eine wichtige Eigenschaft von SVG-Grafiken stellt die Möglichkeit zur Animation dar. Animationen finden in SVG zeitorientiert statt, das heißt die Angabe einer Animation wird mit einer zeitlichen Dauer versehen. Dabei können zwei verschiedene Arten von Animationen verwendet werden. Die erste beeinflusst die Eigenschaften in Form von Attributen eines Elementes, die verändert werden können. So lassen sich beispielsweise Farbwerte fließend ineinander verändern und Größen- oder Transformationsangaben, die in verschiedenen Attributen angegeben werden, kontinuierlich zu neuen Werten umformen. Die zweite Möglichkeit ist die Festlegung von Pfaden, entlang der sich Objekte bewegen lassen.

Beispiel 5.4.1:
Ein Kreis soll entlang eine Pfades bewegt werden und dabei seine Farbe ändern. Die Bewegung wird mit dem animateMotion-Element auf 8 Sekunden entlang des angegebenen Pfades festgesetzt. Innerhalb der ersten 4 Sekunden, ändert sich die Farbe von blau zu rot. Nach dieser Zeit wird für weitere 4 Sekunden die Farbe wieder entgegengesetzt zu blau verwandelt. Das Ergebnis ist ansatzweise der Abbildung 14 zu entnehmen.

<circle cx="50" cy="100" r="16" style="fill:blue">
 <animateMotion dur="8s" 
   path="M0 0 q50 50 100 0 q50 -50 100 0 q50 50 100 0"/>
 <animateColor dur="4s" from="blue" to="red" 
   attributeName="fill"/>
 <animateColor dur="4s" from="red" to="blue" begin="4s"
   attributeName="fill"/>
</circle>

Abbildung 14: Verschiedene Zeitpunktaufnahmen einer Animation aus Beispiel 5.4.1

[Beginn der Animation] [Mitten in der Animation]

Es unterstützt nicht jeder SVG-Betrachter alle grafischen Möglichkeiten, die in SVG gegeben werden. Damit allerdings keine unerwünschten Effekte oder Fehler bei der Darstellung der Objekte auftreten, gibt es die Möglichkeit die Funktionen des Viewers abzufragen. Für das switch-Element existieren verschiedene Attribute, die bei Unterstützung durch den Viewer den Grafikcode in dem Element ausführen lassen. Sollte dieses nicht der Fall sein, so wird der Code nicht für die Grafik verwendet. Dadurch kann beispielsweise abgefragt werden, ob Animationen oder nur statische Elemente unterstützt werden. Auch die Überprüfung, ob externe Dateien erreichbar sind, lässt sich vornehmen, um die Elemente nur in diesem Fall darzustellen. Die einfachste Art in Interaktion mit dem Benutzer der Grafik zu treten, ist das Einfügen eines Hyperlinks. Das funktioniert ähnlich zu HTML, indem in ein a-Element die darzustellenden Angaben des Links eingefügt werden und ein xlink:href-Attribut die anzusteuernde URL, sowohl intern als auch extern, zugewiesen bekommt. Eine richtige Verarbeitung der Benutzereingaben wird allerdings erst durch die Manipulationsmöglichkeiten mittels ECMA-Script erlaubt. Die European Computer Manufacturers Association [ECMA] ist eine internationale Standardisierungsorganisation für Informations- & Kommunikationstechnologien. 1999 wurde von ihr ECMA-Script als Standard für JavaScript und JScript verabschiedet. ECMA-Script dient zur Definition von Funktionen, die bei bestimmten Eingabebefehlen des Anwenders aufgerufen werden. Innerhalb dieser Funktionen können Elemente und auch Attribute gelöscht, verändert oder neu in die SVG-Grafik eingefügt werden. Das ganze beruht auf der Sichtweise einer SVG-Grafik als DOM. Mittels des DOM wird ein Application Programming Interface (API) bereitgestellt, mit dem einzelne Elemente im Dokument-Baum gefunden und bearbeitet werden können. Hierbei spielt besonders die Vergabe eindeutiger ID's für die Elemente eine wichtige Rolle, da diese die Elemente identifizieren.

Beispiel 5.4.2:
Es wird ein Text erzeugt, der auf einen Mausklick reagiert. Dafür wird dem onclick-Attribut eine Funktion mit dem Event evt als Parameter zugewiesen. Die Funktion wird innerhalb des script-Elementes definiert. Dazu wird vom übergebenen Event der Auslöser und dessen Vaterdokument abgefragt. Dieses Gesamtdokument kann nun anhand einer ID nach einem bestimmten Element durchsucht werden. Zu dem Element wird nun das Attribut style abgerufen und in Abhängigkeit seines Wertes neu gesetzt. Dadurch wird beim ersten Klick auf den Ausgangstext der zuvor unsichtbare Text sichtbar gemacht und beim nächsten Klick wieder unsichtbar. Angedeutet wird dieses Beispiel in Abbildung 15 dargestellt.

<defs>
 <script type="text/ecmascript"> 
  <![CDATA[
   function zeige(evt){ 
    var doc =evt.getTarget().getOwnerDocument();
    var newtext =doc.getElementById("zeig");
    var attri =newtext.getAttribute("style");
    if(attri=="visibility:hidden"){
     newtext.setAttribute("style","visibility:inherit");
    }else{
     newtext.setAttribute("style","visibility:hidden");
    }
   }
  ]]>
 </script>
</defs>

<text x="20" y="40" onclick="zeige(evt)"
 style="font-family:Arial;font-size:24;fill:rgb(0,0,255)">
 Weitere Informationen
</text>
<text id="zeig" x="50" y="60" style="visibility:hidden">
 Alles was Sie zu Interaktion wissen sollten.
</text>

Abbildung 15: Interaktion mit dem Benutzer

[Startgrafik] [Nach einem Klick auf den Text]

Da SVG-Dateien reine Textdateien sind, lassen sie sich durch Kompression noch in ihrer Dateigröße reduzieren. Aus diesem Grunde unterstützt SVG die Komprimierung mittels zip, so dass das Datenvolumen zur Übertragung sinkt und nur die Entschlüsselung vor der Darstellung ein wenig Prozessorleistung auf Benutzerseite erfordert.