Um mit Hilfe einer Skriptsprache auf die Inhalte einer SVG Grafik
zugreifen zu können, müssen Sie zuerst dafür sorgen, dass Sie
das Document Object Model (DOM) für das Dokument
verwenden können. Das DOM stellt eine Schnittstelle (API) für Skriptsprachen dar.
Innerhalb der Baustruktur eines SVG Dokuments wird jede Verzweigung als
Knoten bezeichnet. Die wichtigsten dieser Knoten (Verzweigungen)
repräsentieren Elemente, Attribute
und Text. Es gibt allerdings weitere Knoten, wie z.B. Kommentar-Knoten,
die hier jedoch vernachlässigt werden.
Das DOM eines SVG Dokuments besteht
aus einer Baumstruktur, die zu der des SVG Dokuments identisch ist.
In dieser Baumstruktur stehen die die Knoten
des SVG Dokuments, als Objekte (im Sinne einer objektorientierten
Programmiersprache) für die Skriptsprache zur Verfügung.
Die Objekte des DOM repräsentieren also die Knoten des SVG Dokuments, d.h.
über diese Objekte kann die Skriptsprache auf die Knoten des SVG Dokuments
zugreifen.
Ein lesender wie ein schreibender Zugriff auf die Knoten des SVG Dokuments
ist über die Objekte des DOM möglich, da jedes einzelne Objekt spezifische Eigenschaften
und Methoden besitzt:
- Eigenschaften, die ein Objekt näher beschreiben. Dies sind in der Regel die gleichen Eigenschaften, die auch den entsprechenden SVG Elementen zugeordnet werden können. Diese Eigenschaften können verändert werden.
- Methoden, welche den Zugriff auf die Knoten des SVG Dokuments ermöglichen. Auf diese Art sind die Eigenschaften und Inhalte der Knoten manipulierbar.
Achtung, diese Beschreibung entspricht nicht mehr dem aktuellen Stand und muss überarbeitet werden:
Um auf die Objekte des DOM zugreifen zu können, müssen
Sie immer zuerst ein
benanntes Objekt für das SVG Dokument (das document-Objekt), in Form einer Variablen, erzeugen:
var document = evt.getTarget().getOwnerDocument();
Das Objekt evt repräsentiert das eingetretene Ereignis.
Die Methode getTarget() greift auf den Knoten zu,
der dieses Ereignis ausgelöst hat, und liefert ihn zurück.
Die Methode getOwnerDocument()
liefert die Wurzel des auslösenden Knotens zurück,
also das Objekt, welches das Dokument repräsentiert.
Dieses document-Objekt wird letztendlich der Variablen document zugeordnet.
Nun haben Sie über das Objekt mit dem Namen document
Zugriff auf die gesamte
Baumstruktur des DOM bzw. des SVG Dokuments.
Anstelle des Namens document könnten Sie auch einen beliebiegen anderern Variablennamen
für das document-Objekt verwenden, wie z.B. svgdoc oder jupp :-).
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="130px" height="62px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das script-Element</title>
<desc>
Javascript und SVG. Skriptanweisungen durch das
script-Element in SVG Dokumente einbinden.
</desc>
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function meldung2(){
var b1x = document.getElementById('b1').getAttribute('x');
var b1y = document.getElementById('b1').getAttribute('y');
alert("Die x,y Koordinate der Buttoninstanz:\n\t("
+ b1x
+ ","
+ b1y
+ ")");
}
]]>
</script>
<!-- der Style Bereich -->
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold; fill:black;}
rect {fill:#33cc33; stroke:black;}
]]>
</style>
<!-- der button -->
<g id="button">
<rect x="0" y="0" width="100" height="30" rx="5" ry="5" />
<text x="18" y="20">onclick</text>
</g>
</defs>
<!-- button-Instanz mit Event-Attribut onclick;
ruft bei Klick die JavaSriptfunktion meldung2() auf -->
<use id="b1" xlink:href="#button" x="15" y="15"
onclick="meldung2();" />
</svg>
Im obigen Beispiel wird innerhalb der JavaScript-Funktion meldung2()
durch die Variable document das document-Objekt erzeugt.
Über das so erzeugte Objekt document haben Sie nun Zugriff
auf die gesamte Baumstruktur des DOM und dadurch auf alle Knoten des SVG Dokuments.
Die Funktion meldung2() verwendet die Methoden
getElementById() und
getAttribute(), die in den folgenden Kapiteln erläutert werden,
um jeweils den Wert des x-Attributes
bzw. des y-Attributes innerhalb des
use-Elements in den Variablen b1x und b1y zu speichern.
Der Inhalt der Variablen, also die x,y-Koordinate der Button-Instanz,
wird dann mit etwas Text in einem alert-Fenster ausgegeben.
Die Funktion meldung2() startet auch in diesem Beispiel,
wenn der Butten angeklickt wird.
|