Lösungen zu Animationen verwenden

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

  1. Das Quadrat können Sie mit der Anweisung <rect x="0" y="0" width="4" height="4"/> erzeugen.
  2. Um das Quadrat in rot zu füllen, ergänzen Sie den vorstehenden Tag um style="fill:red".
  3. Die Animation ergänzen Sie, indem Sie den <animateColor>-Tag in den <rect>-Tag einschließen.
<rect x="0" y="0" width="4" height="4" style="fill:red">
  <animateColor dur="10s" from="red" to="black" attributeName="fill" fill="freeze"/>
</rect>
  1. Da Höhe und Breite und damit zwei Attribute geändert werden sollen, benötigen Sie zwei weitere <animate>-Tags für den <rect>-Tag.
<animate dur="5s" begin="10s" from="4" to="8" attributeName="width" fill="freeze"/>
<animate dur="5s" begin="10s" from="4" to="8" attributeName="height" fill="freeze"/>
  1. Die Linie erzeugen Sie mit <line x1="0" y1="0" x2="75" y2="10"/>.
  2. Da Sie die erzeugte Linie nicht als Pfad für eine Animation verwenden können, müssen Sie innerhalb des verwendeten <animateMotion>-Tags zusätzlich das path-Attribut verwenden:
<animateMotion path="M0 0 L75 10" dur="8s" fill="freeze"/>

   

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