Maus-Ereignisse richtig nutzen

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

Die drei Mausereignisse onmouseover, onmouseout und onclick sind eigentlich einleuchtend. Sie können damit wie gezeigt Hovereffekte und Ähnliches erstellen. Für den Einsatz der anderen Mausereignisse ist jedoch in der Regel die Kenntnis über die Mauszeigerposition notwendig. Gerade für das Event onmousemove ist dies wichtig, wenn Sie damit Elemente zur Mausposition bewegen möchten. Mit dem evt-Objekt werden an die Ereignisprozeduren für Mausereignisse auch die Mauszeigerpositionen übergeben. Die müssen Sie nur richtig abfragen. Das funktioniert mit Hilfe der Methoden getClientX( ) und getClientY( ) des evt-Objekts innerhalb des Eventhandlers.

Das folgende Beispiel erzeugt einen Kreis mit Farbverlauf, um den sechs schwarze Punkte laufen. Der Kreis mit den Punkten bewegt sich mit dem Mauszeiger mit und umgibt immer den Mauszeiger.

Abbildung: Die erzeugte Bewegung um den Mauszeiger herum.

Der SVG-Code für das Beispiel ist recht einfach gehalten. Er besteht aus einem Pfad, der den Kreis darstellt, um den die Punkte laufen, und sechs Punkten, die mit dem <circle>-Tag definiert werden und einen <animateMotion>-Tag für die Animation enthalten. Bis auf den Anfangszeitpunkt für die Animation unterscheiden sich die Punkte nicht. Wichtig ist, dass die einzelnen Elemente gruppiert und über das transform-Attribut des <g>-Tags positioniert werden.

Was nun natürlich noch fehlt, ist der Code. Wenn Sie auf die Idee kommen sollten, ganz einfach das mousemove-Event des <svg>-Tags abzufragen, sind Sie leider auf dem Holzweg. So einfach geht das nicht, weil nur SVG-Elemente innerhalb des <svg>-Tags über Mausereignisse verfügen. Der Ausweg ist aber auch nicht schwer. Sie benötigen dazu nur ein Rechteck, das die gleiche Größe wie die Grafik selbst hat und in deren Nullpunkt beginnt. Im folgenden Code ist dies der mit "Zeichnung" benannte <rect>-Tag.

Optimal ist es, wenn das Rechteck über allen anderen Elementen, außer auf der zu bewegenden Gruppe, liegt. Das erreichen Sie, indem Sie den <rect>-Tag unmittelbar vor der Gruppe "kreis" definieren. Füllen Sie dann allerdings das Rechteck mit einer Füllfarbe, sind die darunter liegenden Elemente natürlich nicht mehr sichtbar. Füllen Sie es aber nicht, funktionieren die Events für das Element aber merkwürdigerweise nicht. Die Lösung ist wieder einmal ein kleiner Trick. Füllen Sie das Rechteck einfach mit einer Farbe Ihrer Wahl und setzen Sie die Eigenschaft opacity auf 0. Damit ist das Objekt zwar gefüllt, aber dennoch vollkommen transparent.

Der Quellcode ähnelt dem des vorherigen Beispiels. Zunächst müssen Sie in einer Funktion den Event-Listener initialisieren. Das passiert wieder in der Funktion init. Wichtig ist aber in diesem Fall die Funktion positionieren. Sie sorgt dafür, dass die Gruppe "kreis" dem Mauszeiger folgt. Dazu wird zunächst die Gruppe über die getElementById-Methode ermittelt. Anschließend wird die Mauszeigerposition über die Methoden getClientX( ) und getClientY( ) festgestellt. Beide Methoden ermitteln die Position relativ zum Nullpunkt der Grafik. Sie ist also unabhängig davon, wo sich die Grafik in einer Webseite oder einer Anwendung befindet.

Damit der Kreis mit den Punkten mittig um den Mauszeiger angeordnet wird, muss die Gruppe um den Radius des Kreise nach links und unten verschoben werden. Dazu werden die entsprechend Werte zu den Variablen posY und posX addiert, bevor dann das transform-Attribut der Gruppe gesetzt wird.