Die SVG-Spezifikation erlaubt dynamische Änderungen an den Formen und ihren Attributen um Animationseffekte zu erzeugen. Zur Animation von Farben wie in Abbildung C verwendet man das <animateColor>-Tag.
Abbildung C: Farb-Animation |
Das <animateColor>-Tag kann sowohl zur Animation von Füll- wie auch Strichfarben verwendet werden, indem man einfach den Wert von attributeName ändert. Die Dauer der Animation in Sekunden kann man mit dem Attribut dur festlegen. Mit repeatCount=“indefinite“ sorgt man dafür, dass die Animation in einer Endlosschleife ausgeführt wird.
<animateColor id="a" attributeName="fill"
from="#efefef" to="#336699" dur="3s"
repeatCount="indefinite"/>
Fast jedes beliebige Attribut einer Form kann mit dem <animate>-Tag animiert werden.
Abbildung D: Bewegung |
In Abbildung D ist das x-Attribut des Quadrats animiert, wodurch das Quadrat sich nach rechts bewegt. Die Attribute from und to legen das Ausmaß der Bewegung fest.
<animate attributeName="x" begin="0s"
dur="1s" from="5" to="40" repeatCount="indefinite"/>
Über die Grundlagen hinaus
Dieser Artikel ist nur auf die Grundlagen von SVG (Scalable Vector Graphics) wie Formen, Transformationen, Filter und Animation eingegangen. SVG ist jedoch ein Daten- und Grafikformat, das von Anfang an für dynamische, kompakte und interaktive Anwendungen gedacht war. Im nächsten Artikel wird es daher mehr um die dynamischen und interaktiven Aspekte von SVG gehen sowie um die Scripting-Techniken, mit denen SVG wirklich Leben eingehaucht werden kann.
Höchste Performance-Standards für Webseiten und ein persönlicher, kundenorientierter Premium Support.
Die neue V-NAND-Generation bietet die derzeit höchste verfügbare Bit-Dichte. Samsung steigert auch die Geschwindigkeit und…
Die Sicherheitsfunktion taucht in einer Beta eines kommenden Android-Updates auf. Die Quarantäne beendet unter anderem…
Die OutSystems Developer School hilft Entwicklern, in 2 Wochen komplexe reaktive Anwendungen mit der Low-Code-Plattform…
Das Jahr 2024 beginnt laut Cloudflare mit einem Paukenschlag. Die automatischen Systeme des Unternehmens wehren…
Laut Kaspersky nehmen Infostealer gerade auch Spieleplattformen ins Visier. Neue Studie untersucht Angriffe zwischen 2021…