|
Um an die Knoten (Element, Attribute und Text) des ganzen SVG-Dokuments
zu kommen, muss man von vorne anfangen können, sprich man braucht
das Wurzel-Objekt, welches das SVG-Dokument beinhaltet. Dieses erhält
man wie folgt: Am Anfang jedes Skriptes in SVG steht das Event, dass das
Skript ausgelöst hat. Das Event-Objekt heisst evt.
Die verschiedenen Event-Objekte (MouseEvent etc.) entsprechen übrigens
völlig den DOM-Level-2 Event-Objekten und besitzen somit die bekannten
Funktionen und Member (z.B. clientX, clientY...). evt
besitzt zudem die Funktion getTarget(),
die das Element liefert, welches das Event ausgelöst hat. Und jedes
Element besitzt wiederum die Funktion getOwnerDocument(),
die das SVG-Dokument liefert. Die Zeile
var svgdoc = evt.getTarget().getOwnerDocument();
speichert das SVG-Dokument in der Variable svgdoc. Dies ist meistens
am Anfang einer Funktion sinnvoll. Um dann auf die Elemente des SVG-Dokuments
zuzugreifen, gibt es folgende Funktionen, die das SVG-Dokument-Objekt
besitzt:
| Funktion |
Bedeutung |
| getElementById(id) |
Liefert das Objekt zu dem Element, das die entsprechende id hat. |
| getElementsByTagName(tagname) |
Liefert eine Liste von Element-Objekten, die alle den entsprechenden
Tagnamen haben. Die Länge der Liste kann man dann über die
Property length herausfinden. Auf die
einzelnen Listenelemente kann über die Funktion item(index)
zugegriffen werden. Dies wird in
Beispiel 46 gezeigt, das nach dem Laden der SVG die Anzahl der
Rechtecke und das erste Objekt dieser Liste anzeigt. |
| getDocumentElement() |
liefert das Objekt zum <svg>-Element. |
Hat man dann erst mal ein Objekt, das einen Knoten - was ein Element,
Attribut oder einfach nur Text sein kann - beinhaltet, besitzt dieser
diverse Funktionen, um auf andere Knoten, z. B. den Child-Knoten, und
Knotenwerte zuzugreifen:
| Funktion |
Bedeutung |
| getNodeType() |
gibt die Art des Knotens als Ganzzahl zurück. Dabei bedeutet
die 1 einen Element-Knoten, die 2 einen Attribut-Knoten und die 3
einen Text-Knoten. |
| getNodeName() |
gibt den Knotennamen zurück (z.B. den Elementnamen, so wie
"rect") . |
| getParentNode() |
gibt den Eltern-Knoten zurück, wenn es diesen gibt. |
| hasChildNodes() |
prüft, ob der Knoten Kind-Knoten besitzt. |
| getChildNodes() |
liefert eine Liste mit den Kind-Knoten. |
| getFirstChild() |
liefert den ersten Kind-Knoten zurück. |
| getNodeValue() |
liefert den Inhalt des Knotens. Bei einem Text-Knoten wird der reine
Text geliefert (dazu wird die Funktion auch meistens genutzt). |
Das Beispiel 47 zeigt
die Anwendung der Knoten-Funktionen. Hat man ein Objekt, das ein Element
beinhaltet, besitzt dieses folgende Funktionen, die den Zugriff auf die
Attribute des Elements ermöglichen:
| Funktion |
Bedeutung |
| getAttributes() |
liefert eine Liste mit Attribut-Knoten. |
| getAttribute(attributeName) |
liefert den Wert des entsprechenden Attributes. |
| getStyle() |
liefert eine Liste mit Style-Eigenschaften, die im style-Attribut
des Elementes definiert sind. Stylesheets werden damit nicht ausgelesen. |
| getPropertyValue(Eigenschaftsname) |
liefert für eine enstprechende Style-Eigenschaft den Wert.
Die Funktion muss auf die Liste von Style-Eigenschaften angewendet
werden. |
| getCssText() |
liefert die Liste mit style-Eigenschaften und deren Werte als Text.
Die Funktion muss auf die Liste von Style-Eigenschaften angewendet
werden. |
Auch hier soll ein Beispiel die Funktionen verwenden, in Beispiel 48
werden einige Attribute und Style-Eigenschaften der Ellipse ausgelesen,
wenn das SVG mit der Maus angeklickt wird.
Als letztes gibt es noch spezielle Zugriffsfunktionen für Text, sprich
das <text>-Element:
| Funktion |
Bedeutung |
| getData() |
liefert den Text-Inhalt eines Text-Knotens (!) zurück. Diese
Funktion wird also nicht auf das <text>-Element,
sondern dessen FirstChild, dem Text-Knoten angewendet. Die Funktion
hat auf einen Text-Knoten also den gleichen Effekt wie getNodeValue(). |
| getComputedTextLength() |
liefert die Breite des gesamten Text-Elementes in Pixeln zurück,
wird daher auch auf den <text>-Element-Knoten
angewendet. |
| substringData(start, length) |
liefert eine Teilzeichenkette aus einem Text-Knoten, die bei start
beginnt und length Zeichen lang ist. |
| getSubStringLength(von, länge) |
liefert die Breite der Zeichenkette aus dem Text-Element in Pixeln.
Der Parameter von bestimmt den ersten
Buchstaben der Zeichenkette (0 ist der erste Index), der Parameter
länge bestimmt die Länge
der Zeichenekette. Die Funktion wird auch auf den <text>-Element-Knoten
angewendet. |
Beispiel 49 wendet
diese Funktionen an.
|
