Die SVG-Tags für Animationen

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

SVG stellt verschiedene Tags zur Verfügung, mit denen Sie Animationen realisieren können. Zunächst sollen Sie daher einen Überblick über die einzelnen Tags erhalten, bevor die wichtigsten Tags an Beispielen erläutert werden. Details zu den einzelnen Tags folgen dann am Ende des Kapitels.

Welche Tags definieren Animationen?

  • <animate> erlaubt es, einzelne Attribute von Tags dynamisch zu ändern. Dazu muss der Tag innerhalb des Elements eingefügt werden, dessen Attribute geändert werden sollen. Die Änderung ist für alle Attribute möglich, die grundsätzlich animiert werden können. Das können Sie der SVG-Dokumentation des W3C entnehmen. Hier finden Sie zu den einzelnen Attributen eines Tags die Angabe animatable:no bzw. animatable:yes. Letzteres gibt an, dass dieses Attribut im <animate>-Tag dynamisch angepasst werden kann.
  • <animateMotion> ermöglicht es, ein Element an einem Pfad entlang zu bewegen.
  • <animateColor> passt die Farbe des Elements an.
  • <animateTransform> ändert die Transformationsanweisungen des Tags, die über das transform-Attribut festgelegt werden.
  • <mpath> ermöglicht die Definition eines zusätzlichen, untergeordneten Pfades für den Tag <animateMotion>.

Daneben gibt es noch einige Attribute, die im Zusammenhang mit Animationen wichtig sind. Sie werden sie später noch im Detail kennenlernen. Zunächst sollen aber die Grundlagen von Animationen erläutert werden.

Einem SVG-Element eine Animation zuweisen

Wenn Sie ein Element einer SVG-Grafik animieren möchten, müssen Sie dies natürlich definieren. Da Animationen mit eigenen Tags definiert werden, scheint das auf den ersten Blick ein Problem zu sein, da mit den Tags für die Animationen ja nicht die Elemente definiert werden können. Im Prinzip ist die Lösung aber ganz einfach. Die Tags <animateMotion>, <animateColor>, <animateTransform> und <animate> werden einfach als untergeordnete Tags in die Elemente eingefügt. Möchten Sie also bspw. ein Element an einem Pfad entlang bewegen, fügen Sie den Tag <animateMotion> einfach innerhalb des Tags des Elements ein:

<rect  …>
  <animateMotion … />
</rect>

Das ist im Prinzip auch schon alles. Sie haben damit festgelegt, dass das <rect>-Element bewegt werden soll. Die Einzelheiten bestimmen die Attribute des <animateMotion>-Tags.

Hinweis:
Animationen setzen also voraus, dass das Element, das Sie animieren möchten, nicht mit /> im gleichen Tag abgeschlossen wird, sondern einen Abschluss-Tag verwendet. Sie können aber in jedem Tag einen Abschluss-Tag definieren, indem Sie bspw. aus <rect/> die Tags <rect></rect> machen.

   

<< 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