Objekt-Attribute ändern

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

Mit dem Tag <animate> können Sie beliebige Formatierungen und Attribute eines Elements anpassen. Damit ist es bspw. möglich, die Größe des Kreises während der Animation zu verändern. Wie das geht, zeigt das folgende Beispiel.

Die Verwendung des Tags ist denkbar einfach. Er hat sehr viel Ähnlichkeit mit dem Tag <animateColor>. Auch hier geben Sie die Dauer wieder durch das Attribute dur an und bestimmen mit from und to Anfangs- und Endwert. Als Wert für den Parameter attributeName geben Sie einfach den Namen des zu ändernden Attributs an, hier also r. Die Zeile

<animate dur="6s" from="3" to="6" attributeName="r" />

sorgt somit dafür, dass der Kreis bei Erreichen des Endpunktes seine maximale Größe von 12 Pixeln Ø hat. Interessanter wäre es aber sicherlich, wenn der Kreis an der breitesten Stelle der Sichel den größten Durchmesser hat und dieser bis zum Endpunkt wieder die Ausgangsgröße annimmt. Auch das lässt sich mit wenig Aufwand realisieren.

Sie müssen dazu einfach nur zwei Animationen nacheinander ausführen. In der ersten definieren Sie die Vergrößerung des Radius, in der zweiten die Verkleinerung. Damit sie hintereinander ausgeführt werden und bei Erreichen des Endpunktes der Animation die Ausgangsgröße wieder erreicht wird, müssen Sie darauf achten, dass die Dauer beider Animationen zusammen sechs Sekunden beträgt und die zweite beginnt, wenn die erste aufhört. Dazu wird in folgendem Listing die Dauer der ersten Animation auf vier Sekunden, die zweite auf zwei Sekunden festgelegt.

Nun müssen Sie nur noch definieren, dass die zweite Animation nach Abschluss der ersten anfangen soll. Dazu können Sie das Attribut begin auf "4s" setzen, wie dies das Listing zeigt.

<circle cx="130" cy="80" r="3" style="fill:red;stroke:none">
  <animateMotion  dur="6s" path="M0 0 Q203 16 85 55" />
  <animateColor  dur="6s" from="red" to="yellow" attributeName="fill" />
  <animate dur="4s" from="3" to="6" attributeName="r" />
  <animate dur="2s" begin="4s" from="6" to="3" attributeName="r" />
</circle>

Die wichtigsten Phasen der Animation

Abbildung: Die wichtigsten Phasen der Animation.

   

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