Skripte einfügen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Zum Skripting innerhalb von SVG-Grafiken ist natürlich eine Skriptsprache erforderlich. Verwendet wird dazu ECMAScript. Dabei handelt sich um einen standardisierten JavaScript-Dialekt. Wenn Sie also bereits JavaScript oder JScript-Kenntnisse haben und zudem vielleicht schon das W3C-DOM von Netscape 6 kennen, werden Sie schnell Skripting von SVG-Grafiken beherrschen.

Skripte werden innerhalb des <script>-Tags in die SVG-Datei eingefügt. Das funktioniert ganz ähnlich wie in HTML-Seiten. Wichtig ist das type-Attribut des Tags, das den Wert text/ecmascript bekommen muss. Damit bestimmen Sie die verwendete Skriptsprache für den XML-Parser. Das Skript selbst müssen Sie in einen CDATA-Abschnitt einfügen. Er beginnt mit <![CDATA[ und endet mit ]]>. Dazwischen steht dann das eigentliche Skript. Das kann eine Funktion sein, aber auch eine Variablendeklaration oder eine einzelne Anweisung.

Das folgende erste Beispiel zeigt, wie Sie eine Funktion definieren und aufrufen, die dafür sorgt, dass beim Überfahren eines Kreises dessen Farbe von Rot nach Blau geändert wird. Das Skript ist zwar recht einfach, zeigt aber eindrucksvoll die Fähigkeiten von dynamischen SVG-Grafiken. Zunächst wird im <script>-Tag eine Funktion farbeAendern definiert, an die ein Parameter evt übergeben wird. Wichtig ist, dass der Parameter wirklich evt heißt, da er dazu dient, das Objekt an die Prozedur zu übergeben, deren Ereignis die Funktion aufruft. In den ersten beiden Zeilen werden dann die beiden notwendigen Variablen kreis und aktFarbe definiert. Der Variablen kreis wird dann der Rückgabewert der Methode getTarget des Parameters zugewiesen und damit das Element der SVG-Grafik, das das Ereignis ausgelöst hat, ermittelt. In der zweiten Zeile wird der Variablen aktFarbe der aktuelle Wert des style-Attributs zugewiesen, der im Beispiel lediglich aus der Angabe der Füllfarbe besteht. Das geschieht durch Aufruf der getAttribute-Methode des SVG-Elements. Als Parameter muss der Name des Attributs übergeben werden, dessen Wert ermittelt werden soll, hier also style.

Hinweis:
Zeichenketten, wie Attributnamen, oder Attributwerte, die Zeichenketten darstellen, müssen in Skripten immer in Anführungszeichen gesetzt werden!

Wenn der aktuelle Wert ermittelt ist, wird in einer if-Verzweigung geprüft, welchen Wert die Variable aktFarbe hat. Das ermöglicht es, die Funktion zweimal aufzurufen, zum einen beim Überfahren des Elements und zum anderen beim Verlassen. Die Funktion ermittelt selbständig, welche Füllfarbe das Element gerade hat, und weist die jeweils andere zu. Der Ausdruck aktFarbe == "fill:red" prüft, ob der Wert von aktFarbe gleich "fill:red" ist. In diesem Fall wird mit der Methode setAttribute dem style-Attribut der Wert fill:blue zugewiesen. Der erste Parameter der Methode gibt den Namen des zu ändernden Attributs und der zweite den neuen Wert an. Bei jedem anderen Wert wird dem Attribut der Wert fill:red zugewiesen.

Damit ist die Funktion vollständig. Damit das Skript funktioniert, müssen Sie sie natürlich noch aufrufen. Ähnlich wie in HTML funktioniert dies mit Eventhandlern. Dazu weisen Sie die auszuführende Funktion den Events des Elements zu, bei deren Eintreten sie ausgeführt werden soll, im Beispiel also bei den Ereignissen onmouseover und onmouseout. Wichtig dabei ist in diesem Fall, dass Sie als Parameter das Schlüsselwort evt übergeben.

Abbildung: Zustandsänderung des Elements beim Hovern.

Wichtig ist, dass das Beispiel nur korrekt funktioniert, wenn fill:red die einzige Eigenschaft im style-Attribut ist. Das ist noch recht unkomfortabel, die nächsten Beispiele zeigen aber, wie Sie auch problemlos einzelne style-Angaben abfragen und manipulieren können.