Leitfaden zu skalierbaren Vektorgrafiken, Teil 2

Zum Einstieg in SVG (und um die Beispiele aus diesem Artikel betrachten zu können) muss man sich den SVG Viewer von Adobe als Download besorgen.

Beispiel A: Animierter Button

Der Button besteht aus zwei Rechtecken und einem Text-Element. Das erste Rechteck ist das blaue Recheck, das unter dem Text sichtbar ist. All diese Elemente sind in einen anchor-Tag eingebettet. Das <a />-Tag in SVG ähnelt dem <a>-Tag in HTML. Ein Klick auf die eingebundene Form ersetzt die aktuelle Seite durch die URL im Attribut xlink:href. Die grundlegende Struktur für das Beispiel in Abbildung A sieht wie folgt aus:

In HTML erzielt man Rollover-Effekte mithilfe von CSS- oder JavaScript-Funktionen. Im Unterschied dazu ist der Rollover-Mechanismus bereits Bestandteil des SVG-Standards. Ein einfacher Rollover-Effekt sieht zum Beispiel so aus:

Das <set>-Tag wird verwendet, um den Zustand des Attributs eines Elements zu ändern. Im obigen Beispiel ist das <set>-Tag in ein Rechteck eingebunden, das seine Farbe von blau in rot ändert, wenn der Benutzer mit der Maus über den Button fährt.

Um die CSS-Eigenschaften eines Elements zu ändern kann man attributeType=“CSS“ wie folgt verwenden:

Der Schlagschatten-Effekt in Beispiel A wird durch eine Kombination von SVG-Filtern erzielt. feGaussianBlur sorgt dafür, dass der Schatten verschwommen erscheint, während die dx– und dy-Attribute des feOffset-Elements Richtung und Tiefe des Schattens festlegen.

Ereignis-Behandlung

Angenommen der Button soll sich immer gleich verhalten, unabhängig davon, ob der Benutzer die Maus über den Text oder die restliche Fläche des Rechtecks bewegt. Die nahe liegende Lösung wäre, ein zweites, vollständig transparentes Rechteck einzufügen. Dieses unsichtbare Rechteck würde wie eine Glasscheibe über dem Button funktionieren und alle die Animation auslösenden Ereignisse auffangen.

Eine andere Lösung besteht darin, alle Unterelemente des Buttons zusammenzufassen, indem man sie in ein gemeinsames anchor-Tag einbettet und die Ereignisse an die einzelnen Bestandteile des Buttons weiterleitet. Dieses <set>-Tag ändert die Textfarbe, egal ob sich die Maus des Benutzers über der Buttonfläche oder dem Text befindet:

Maus-Ereignisse

Der SVG-Standard bietet einen Mechanismus für die Verwendung der Maus zum Starten einer Animation. Im folgenden Code-Ausschnitt beginnt die Animation zwei Sekunden nachdem auf das Rechteck geklickt wurde und dauert zwei Sekunden. Die Deckkraft des Rechtecks ändert sich von voller Deckkraft in ein Fünftel des ursprünglichen Wertes.

Mit Scripts kann man die gleichen oder sogar noch komplexeren, feiner abgestuften Effekte erzielen. Die einfachste Möglichkeit zum Aufrufen eines Scripts ist die Nutzung des onclick-Attributs der Form.

Die Funktion startAnimation() initialisiert Animationsvariablen und stellt den Animations-Timer ein. Der interval-Wert gibt die Anzahl der Millisekunden zwischen den einzelnen Frames an.

Die Funktion doFrame() wird pro Frame einmal aufgerufen und ist für das Erzeugen des Animationseffekts verantwortlich. Deckkraft und Bewegung des Rechtecks werden schrittweise animiert, indem die Variable currentValue stufenweise geändert wird.