Das SVG-Event-Modell

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

Das Event-Modell legt fest, wie Events, also Ereignisse, verarbeitet werden. Ähnlich wie in JavaScript gibt es dafür zwei verschiedene Möglichkeiten. Die erste haben Sie in den vorherigen Beispielen schon kennengelernt. Dabei werden Attribute für die Tags vergeben, deren Ereignisse abgefangen und verwendet werden sollen. Die Attribute onclick, onmouseover und onmouseout wurden bereits erläutert. Daneben gibt es jedoch noch eine Reihe anderer Event-Attribute, die in den folgenden Tabellen beschrieben werden. Nicht in allen SVG-Tags können alle Attribute verwendet werden. Daher werden sie entsprechend ihrer Verwendung aufgeteilt.

Tabelle: Eventattribute für Grafik- und Textelemente.

Attribut Bedeutung
onfocusin Das Ereignis tritt ein, wenn das Element den Fokus bekommt, also aktives Element ist.
onfocusout Tritt ein, wenn das Element den Fokus verliert.
onactivate Tritt ein, wenn das Element aktiviert wird.
onclick Tritt ein, wenn auf das Element geklickt wird.
onmousedown Tritt ein, wenn auf dem Element die Maustaste heruntergedrückt wird.
onmouseup Tritt ein, wenn auf dem Element die Maustaste losgelassen wird.
onmouseover Tritt ein, wenn sich die Maus über dem Element befindet.
onmousemove Tritt ein, wenn auf dem Element die Maus bewegt wird.
onmouseout Tritt ein, wenn die Maus das Element verlässt.
onload Tritt ein, wenn das Element geladen wurde.

Die Attribute für das SVG-Dokument können nur im <svg>-Tag der Grafik angewendet werden. In allen anderen Elementen haben sie keine Wirkung.

Tabelle: Event-Attribute für das SVG-Dokument.

Attribut Bedeutung
onunload Tritt ein, wenn die SVG-Grafik entladen wird.
onabort Tritt ein, wenn der Ladevorgang abgebrochen wird.
onerror Tritt ein, wenn ein Fehler auftritt.
onresize Tritt ein, wenn die Größe der Grafik geändert wird.
onscroll Tritt ein, wenn innerhalb der Grafik gescrollt wird.
onzoom Tritt ein, wenn in der Grafik gezoomt wird.

Tabelle: Event-Attribute für Animationen.

Attribut Bedeutung
onbegin Tritt ein, wenn eine Animation beginnt.
onend Tritt ein, wenn die Animation endet.
onrepeat Tritt ein, wenn die Animation wiederholt wird.

Der SVG Viewer unterstützt allerdings noch nicht alle Events, die laut SVG-Standard verfügbar sind. Die Eventattribute onresize, onscroll, onfocusin, onfocusout, onactivate, onabort, onerror, onbegin, onend und onrepeat werden derzeit noch nicht unterstützt.

Das Ereignis onunload für den <svg>-Tag wird außerdem nur vom Internet Explorer korrekt ausgeführt. Dies liegt nach Aussage von Adobe aber nicht an mangelnder Unterstützung durch das Plug-In, sondern an einem Bug des Netscape Navigators.

Immer wenn Sie diese Attribute verwenden, ist es in der Regel sinnvoll, das Element zu übergeben, das dieses Ereignis ausgelöst hat. Das ist vor allen dann wichtig, wenn Sie genau dieses Element manipulieren möchten. Dazu übergeben Sie an die auszuführende Funktion ein Attribut mit dem evt, dem Sie auch den Wert evt übergeben. Dies haben die vorstehenden Beispiele schon ausführlich gezeigt, sodass sich ein weiteres an dieser Stellt erübrigt.

Hinweis:
Der Wert evt stellt ein Objekt dar und ist mit den Schlüsselwort this von JavaScript bzw. me von VBScript vergleichbar. Es gibt immer das Objekt zurück, in dessen Eventhandler es verwendet wird.

Die zweite Möglichkeit, auf Ereignisse in SVG-Dokumenten zu reagieren, besteht darin, sogenannte Event-Listener zu definieren. Das sind im Prinzip Funktionen, die selbstständig auf bestimmte Ereignisse reagieren, ohne dass dazu Eventattribute zu den entsprechenden Tags hinzugefügt werden müssen.

Das Beispiel mit dem Kreis, der beim Hovern die Farbe wechselt, sieht mit dieser Art der Ereignisbehandlung wie folgt aus. Wichtig ist dabei, dass Sie zunächst einmal Zugriff auf das document-Objekt des SVG-Dokuments benötigen, um die Eventhandler zu implementieren. Dazu ist auf jeden Fall ein onload-Attribut für den <svg>-Tag erforderlich, mit dem Sie eine Funktion zum Initialisieren der Eventhandler aufrufen. Im folgenden Code ist das die Funktion init. Zunächst deklariert das Skript zwei globale Variablen elem und svgdok, die in der Funktion init initialisiert werden. Der Variablen svgdok wird mit der Anweisung svgdok=evt.getTarget().getOwnerDocument(); das document-Objekt des SVG-Dokuments zugewiesen. Es stellt das übergeordnete Objekt der Grafik dar. Im Anschluss wird mit der getElementById-Methode des document-Objekts das Element zurückgegeben, für das ein Eventhandler implementiert werden soll. In diesem Fall ist es das Element mit der id "kreis".

Der Eventhandler wird dann mit der Methode addEventListener erzeugt. Dieser Methode müssen drei Parameter übergeben werden. Der erste gibt das Event an, das beobachtet werden soll. Dessen Name muss in Anführungszeichen gesetzt werden. Der zweite Parameter definiert die auszuführende Funktion. Hier wird die bereits im Beispiel hovern.svg verwendete Funktion genutzt. Sie heißt farbeAendern. Deren Name, ohne Parameter und Anführungszeichen, muss als zweiter Wert an die Methode übergeben werden. Als dritten Parameter geben Sie den Wert false an.

Was dieser Wert bedeutet, geht aus der SVG-Dokumentation nicht hervor. Zwar wird der Parameter im Beispielcode verwendet, er wird aber nicht weiter erläutert. Lassen Sie den Parameter jedoch weg, wird ein Syntaxfehler gemeldet, geben Sie stattdessen true an, wird die Funktion beim Eintreten des Ereignisses nicht ausgeführt. Daher ist zu vermuten, dass der Parameter für eine spätere Verwendung vorgesehen ist.

Mit diesen wenigen Zeilen haben Sie festgelegt, dass die Funktion farbeAendern ausgeführt werden soll, wenn die Ereignisse onmouseover und onmouseout eintreten. Weitere Angaben sind nicht mehr notwendig. Auch die Attribute onmouseover und onmouseout können im <circle>-Tag entfallen.

<?xml version="1.0"?>
...
<svg width="300" height="800" onload="init(evt)">
  <script type="text/ecmascript">
    <![CDATA[
     var elem;
     var svgdok;
     function init(evt)
     {
        svgdok=evt.getTarget().getOwnerDocument();
        elem=svgdok.getElementById("kreis");
        elem.addEventListener("mouseover", farbeAendern, false)
        elem.addEventListener("mouseout", farbeAendern, false)
     }
     function farbeAendern(evt) 
     {
        var kreis= evt.getTarget();
        var aktFarbe = kreis.getAttribute("style");
        if (aktFarbe == "fill:red")
          kreis.setAttribute("style", "fill:blue");
        else
          kreis.setAttribute("style", "fill:red");
     }
   ]]> 
  </script>  
  <a xlink:href="#animieren">
    <circle id="kreis" cx="100" cy="100" r="20" style="fill:red">
      <animate id="animieren" attributeName="r" begin="indefinite" from="20" to="1" by="-1" dur="5s" fill="freeze"/>
    </circle>
  </a>
</svg>

Diese Methode ist gerade für kleinere Anwendungen etwas aufwändiger, lohnt aber, wenn sehr viele Events verwendet werden sollen. Sie führt außerdem zu übersichtlicherem Code und ermöglich auch die Abfrage von Ereignissen, die bspw. eintreten, wenn der Grafik Elemente per Skript hinzugefügt werden. Zudem haben Sie die Möglichkeit, bei Bedarf die Eventhandler auch wieder zu entfernen.

Die Namen der Events, die Sie an die addEventListener-Methode übergeben müssen, weichen etwas von denen der Attribute ab. Bei den Maus-Ereignissen brauchen Sie im Prinzip nur das on vor dem eigentlichen Namen wegzulassen. Wenn Sie als Eventattribut onmouseover verwenden, geben Sie für die Methode mouseover an.

Die Ereignisse des <svg>-Tags und spezielle DOM-Ereignisse weichen jedoch stärker von den Eventattributnamen ab bzw. sind als Attribute gar nicht verfügbar. Die folgende Tabelle zeigt die verfügbaren Eventnamen.

Tabelle: Die Ereignisnamen für SVG-Event-Listener.

Mausereignisse SVG-Document-Ereignisse DOM-Ereignisse Animationsereignisse
click SVGLoad DOMSubtreeModified beginEvent
mousedown SVGUnload DOMNodeRemoved endEvent
mouseup SVGAbort DOMNodeRemovedFromDocument repeatEvent
mouseover SVGError DOMNodeInsertedIntoDocument
mousemove SVGResize DOMAttrModified
mouseout SVGScroll DOMCharacterDataModified
SVGZoom DOMNodeInserted

   

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de