Zugreifen auf die Grafik per JavaScript

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

Voraussetzung für den Zugriff auf die SVG-Dateien in der HTML-Seite ist, dass Sie sie mit dem <EMBED>-Tag einfügen und benennen. Über den Namen können Sie dann nämlich auf das Element der Seite zugreifen, indem Sie wie innerhalb der SVG-Grafik mit der Methode getElementsById( ) auf die Diagramme zugreifen.

Die Anweisung

am Ende der Funktion INIT( ) gibt die SVG-Grafik als SVGDocument-Objekt zurück und speichert einen Verweis darauf in der Variablen SVGDoc. Diese Variable wird dann als Parameter an die Funktion INITDiagramm( ) übergeben, in der dann die Formatierung erfolgt. Innerhalb der Funktion müssen Sie nur noch auf das bereits vorhandene Objekt zugreifen und ähnlich wie innerhalb der SVG-Datei die Attribute und Inhalte setzen. Die Werte in den Variablen und definierten Arrays werden in der Funktion INITDiagramm den entsprechenden Elementen zugewiesen. Begonnen wird dabei mit den Achsentiteln. Zunächst wird der Variablen alterText das Textelement zugewiesen, das den Achsentitel für die x-Achse definiert und die id xtext hat. Über die Methode setNodeValue des von firstChild( ) zurückgegebenen Objekts wird dann der neue Text auf den Wert der Variablen xtext gesetzt. Mit der Beschriftung für die y-Achse wird dann genauso verfahren.

Sind die Achsentitel formatiert, wird mit den Reihentiteln genauso verfahren. Der Unterschied besteht nur darin, dass die Texte für die Textelemente aus dem Array texte gelesen werden. Der Zugriff erfolgt über einen Index, der in eckigen Klammern angegeben wird und bei 0 beginnt. Im Anschluss wird auf ähnliche Weise auch der Diagrammtitel definiert und positioniert, indem über die setAttribute-Methode die Attribute x und y festgelegt werden.

Für die Formatierung des Titels wird eine if-Anweisung verwendet. Sie prüft, ob die Variable titelcolor einen Wert ungleich "" hat. In diesem Fall wird die aktuelle Formatierung in der Variablen format gespeichert. Mit der setProperty-Methode wird dann die Füllfarbe entsprechend gesetzt. In der ersten if-Anweisung wird die Farbe des Textes dtitel gesetzt und in der zweiten die Füllfarbe des Titelhintergrundes.

Die weiteren Formatierungen setzt das Skript auf die gleiche Weise. Im Prinzip werden immer nur die gleichen bereits bekannten Eigenschaften und Methoden verwendet, sodass sich weitere Erläuterungen erübrigen.