Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 16

16.3 SVG Inhalte verfuegbar machen

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.




index  |  Kapitel 16  |  16.2  <<  | 16.3 |  >>  16.4   Methoden fuer den Zugriff auf Elemente