Lösungen zu Animationen verwenden
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
- Das Quadrat können Sie mit der Anweisung <rect x="0" y="0" width="4" height="4"/> erzeugen.
- Um das Quadrat in rot zu füllen, ergänzen Sie den vorstehenden Tag um style="fill:red".
- 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>
- 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"/>
- Die Linie erzeugen Sie mit <line x1="0" y1="0" x2="75" y2="10"/>.
- 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