SVG/ Animation

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |

Beispiel und schematische Darstellung einer Animation in SVG: Gleichzeitige Animation von Breite, Radius der abgerundeten Ecken, Position, Füllfarbe und Füllopazität eines Rechteckes über 5 Sekunden.

Animation, Grundlagen

Als Animation versteht sich in SVG die zeitliche Änderung eines Attributes oder einer Eigenschaft eines Elementes oder die Änderung der Position von Elementen im aktuellen Koordinatensystem. In der graphischen Präsentation entspricht dies einer Änderung dieser Präsentation. Eigenschaften und Attribute können unabhängig voneinander animiert werden. Jede dieser Animationen hat einen eigenen Zeitablauf.

Die in SVG verwendete Animationsform nennt sich auch deklarative Animation und basiert auf SMIL, einer anderen XML-Sprache. Art und Notation werden von SMIL übernommen. In einigen speziell für SVG relevanten Teilen wird SMIL durch SVG erweitert. Bei der deklarativen Animation wird der Zeitablauf formal im Dokument beschrieben, es ist Aufgabe des Darstellungsprogrammes, aus dieser Beschreibung eine zeitabhängige Darstellung zu generieren.

Dies unterscheidet die deklarative Animation von der sogenannten rahmenbasierten Animation (englisch: frame-based), bei der der Autor das gewünschte Ergebnis erreicht, indem er für die gesamte Szenerie Einzelbilder erstellt, sogenannte Rahmen, die dann in der Darstellung mit definierten Anzeigedauern aufeinander folgen. Ein Unterschied ist auch gegeben zur Skriptanimation, bei der jeweils jede Änderung eines Attributes oder einer Eigenschaft im Skript einzeln und explizit angegeben wird und nach einem gewissen Zeitabstand eine weitere Änderung durch das Skript erfolgt.

Deklarative Animation ermöglicht diesen Methoden gegenüber eine Angabe der Interpolation über den gesamten Zeitablauf, neben der diskreten Änderung auch verschiedene Interpolationsmethoden für kontinuierliche Änderungen.

Die Referenz des W3C zu SMIL-Animation wie für SVG1.1 anwendbar ist in einer speziellen Empfehlung zu finden: SMIL-Animation.
In SVG tiny 1.2 wird verwiesen auf SMIL 2.1.
Die aktuelle Version (mit einigen Feinkorrekturen) ist SMIL 3.0.

In SVG selbst gibt es nur einige kurze Erklärungen der verwendeten Elemente und Attribute und der für SVG spezifischen Erweiterungen: Animation in SVG 1.1, Animation in SVG tiny 1.2.
Darüberhinaus verweist SVG jeweils auf SMIL. Die Kapitel in den SVG-Empfehlungen reichen allein nicht aus, um deklarative Animationen im Detail zu verstehen, dazu ist SMIL notwendig.

Weil aktuell (2010) verfügbare Darstellungsprogramme den Bereich Animation - wie andere Bereiche von SVG auch - nur lückenhaft interpretieren, kann es sich für Autoren als recht nützlich erweisen, zu recherchieren, ob eine bestimmte Funktionalität für die eigenen Zwecke ausreichend gut implementiert ist. Die SVG-Arbeitsgruppe bietet für alle Bereiche von SVG Tests an: Überblick, W3C-Testsuites (englisch).
Ein Autor dieses Buches bietet auch eine systematische Sammlung von Beispielen und Tests zur Animation mit SVG an (deutsch und englisch).
Diese und andere Quellen von Beispielen und Anwendungen können zum Lernen sehr nützlich sein, auch weil das Thema Animation sehr umfangreich ist und nicht immer ganz einfach zu verstehen - weder für Autoren von Dokumenten, noch für Programmierer der Darstellungsprogramme.

Für umfangreichere Anwendungen bietet es sich auch an, nachdem Kenntnisse in deklarativer Animation vorhanden sind, mit eigenen Skripten oder Programmen die Werte für den Ablauf einer Animation berechnen zu lassen. Dafür eignet sich jede Sprache mit einer Textausgabe.

Elemente

SVG übernimmt von der SMIL-Animation die Elemente set, animate, animateColor und animateMotion. Speziell für Transformationen wird in SVG animateTransform eingeführt. Zusätzlich definiert SVG auch noch erweiterte Funktionalitäten für animateMotion, mit welchem Elemente im aktuellen Koordinatensystem bewegt werden können. Anders als die anderen Animationselemente animiert animateMotion kein spezifisches Attribut oder eine Eigenschaft, sondern wird als unabhängige Möglichkeit einer Translation definiert. animateColor dient speziell der Animation von Farben. Mittels set steht eine einfache Methode zur Verfügung, ohne weitere Interpolation einen neuen Wert für ein Attribut oder eine Eigenschaft zu setzen, auch Farben. Ausgenommen sind davon in den aktuellen Versionen allerdings Transformationsattribute wie transform, für welche nur animateTransform verfügbar ist. animate ist ein allgemeines Element zur Animation, wie set mit der Ausnahme von Transformationsattributen.

Die genannten Elemente werden im Weiteren zusammengefasst zu Animationselementen. Animationselemente gehören zur allgemeineren Klasse der zeitabhängigen Elemente, von denen es in SMIL und in SVG tiny 1.2 noch einige weitere gibt.

Attribute, welche für Animationselemente spezifisch sind und somit also der näheren Beschreibung einer Animation dienen, seien im weiteren Animationsattribute genannt. Animationsattribute sind selbst allesamt nicht animierbar.

Methoden und Prinzip

Wie ein Darstellungsprogramm eine zeitlich abhängige Präsentation erreicht, ist in SVG nicht festgelegt. Es gelten nur wie für jede Darstellung die allgemeinen Genauigkeitsanforderungen. Damit für einen Menschen der Eindruck einer kontinuierlichen Änderung von visuell dargestellten Objekten erreicht wird, ist allerdings nur mäßiger Aufwand notwendig. Das menschliche Auge ist nicht in der Lage, eine schnelle Abfolge von Einzelbildern von einer kontinuierlichen Änderung zu unterscheiden. Die Grenze liegt bei etwa 20 bis 30 Einzelbildern pro Sekunde, in dem Bereich liegt auch die Technik von Fernsehen und Video.

Für eine präzise Animation ist es notwendig, dass das Format einen definierten Zeitablauf festgelegt. Vor allem ist der Zeitbeginn des Dokumentes festzulegen, also der Zeitpunkt 0 für das Dokument und darin befindliche Animationen. Dies ist bei SVG 1.1 der Dokumentbeginn, wenn also das Hauptelement svg samt Inhalt komplett interpretiert ist und die Darstellung unmittelbar bevorsteht. Dies entspricht in SVG tiny 1.2 der Voreinstellung des Attributes timelineBegin des Elementes svg, was dessen Wert 'onLoad' entspricht. Der andere mögliche Wert ist 'onStart', das ist im Regelfalle ein etwas früherer Zeitpunkt, wenn die Startmarkierung des Elementes svg komplett interpretiert und verarbeitet worden ist.

Bei der Art der Angabe von Werten, zwischen denen bei der Animation interpoliert werden soll, gibt es in SVG einige grundverschiedene Methoden. Die Basismethode ist die sogenannte values-Animation, bei der werden die Werte, zwischen denen interpoliert werden soll, in einem Attribut values jeweils mit einem Semikolon mit optionalen Leerzeichen getrennt. Eine weitere Methode liegt speziell für animateMotion neben der values-Animation vor - alternativ kann ein beliebiger Pfad notiert werden, entlang dessen die Bewegung erfolgen soll.

Die dritte Methode ist die sogenannte to-Animation, bei der wird angegeben, zu welchem Wert hin interpoliert werden soll, während der Anfangswert der aktuelle ist. SMIL gibt für diese Methode eine spezielle Interpolationsformel an.

Weitere Varianten, die from-to-Animation, die from-by-Animation und die by-Animation sind in SMIL definiert als Äquivalente zu speziellen values-Animationen, stellen also keine eigenen Methoden dar, sondern nur alternative Notationen.

Ein einfaches Beispiel zeigt bereits das wesentliche Prinzip:

<circle r="15">
<animateMotion dur="12s" values="0,300;400,0;400,300;0,300" />
</circle>

Mittels animateMotion wird ein Kreis entlang des Pfades, einem rechtwinkligen Dreieck, bewegt. Der Pfad wird hier im Attribut values notiert mit einer Liste von Punkten, die jeweils voneinander mit einem Semikolon separiert sind. Der Kreis bewegt sich zwischen den angegebenen Punkten, in der Reihenfolge, wie sie notiert sind. Mit dem Attribut dur wird die einfache Dauer der Animation angegeben, hier 12s. Weitere Angaben sind hier vom Autor nicht erforderlich. Die Angaben genügen, damit das Darstellungsprogramm die komplette Animation erzeugt.

Einfaches Beispiel animateMotion

Etwas ausgeschmückt sieht das Beispiel dann so aus:
Einfaches Beispiel animateMotion:
Mittels animateMotion wird ein blau gerandeter Kreis entlang des grauen Pfades, einem rechtwinkligen Dreieck, bewegt. Wird die rote Füllung des Kreises sichtbar, liegt eine Fehlinterpretation vor. An den Ecken des Dreiecks ist jeweils angeben, zu welchen Zeitpunkten der Kreis an den Ecken ist. Nach 12s ist die Animation beendet und der Kreis springt zurück zum Ursprung, welcher ebenfalls grau gekennzeichnet ist.

Anordnung im Quelltext

Animationselemente können in allen graphischen und Gruppierungselementen notiert werden, jeweils hinter den gegebenenfalls vorhandenen Elementen title, desc und metadata.
Es ist üblich, Animationselemente als nicht direkt dargestellte Elemente entweder innerhalb des Elementes defs zu notieren oder wie im Beispiel in dem Element, auf welches die Animation wirken soll. Bei Elementen, die als Empfänger für Ereignisse dienen, zum Beispiel um so eine Animation zu starten, wird manchmal das Animationselement in diesem Element notiert, auch wenn die Animation auf ein anderes Element wirkt. Durch eine gute Strukturierung wird so das Erstellen, Verstehen und Überarbeiten von Dokumenten erleichtert.

Animationsfunktionen

Die Animation selbst ist über eine zeitabhängige Funktion definiert, welche die Interpolation zwischen zwei aufeinanderfolgenden Werten des Attributes values bestimmt. Die Animation bezieht sich immer exakt auf ein Zielelement und dort exakt auf ein Zielattribut, beziehungsweise eine Zieleigenschaft (der Einfachheit halber sei dies im Folgenden immer eingeschlossen; ferner ist bei animateMotion das Zielattribut impliziert und wird nicht explizit angegeben). Die Animation bestimmt eine Zeitabhängigkeit des Zielattributes. Die Zeitabhängigkeit basiert auf der sogenannten einfachen Animationsfunktion f(t), mit t der Zeit (englisch: simple animation function). Die einfache Animationsfunktion definiert für jeden Zeitpunkt der einfachen Animationsdauer (englisch: simple duration) einen Wert für das Zielattribut.

Sofern nicht anders angegeben, ist das Elternelement des Animationselementes das Zielelement der Animation. Der Basiswert eines Zielattributes ist der Wert des Attributes ohne Animationseffekt, was also als Attributwert notiert oder impliziert wird. Der Präsentationswert des Zielattributes zur Zeit t ist der Wert, der sich ergibt, wenn die Animation zum Zeitpunkt t angewendet wird. Die Animationseffekt kann auch von anderen Parametern abhängen, nicht nur vom Basiswert und der einfachen Animationsfunktion. Das allgemeinere Konzept zum Basiswert ist der darunterliegende Wert (englisch: underlying value), welcher auch Animationsfunktionen mit niedrigerer Priorität einschließt. Die einfache Animationsfunktion wird dann notiert als f(t,u), wobei u die anderen Parameter darstellen, insbesondere den darunterliegenden Wert.

Animationen, die zum darunterliegenden Wert addiert werden, heißen additiv, solche, die den darunterliegenden Wert überschreiben, heißen nicht-additiv. Die einfache Animationsfunktion kann auch wiederholt werden, Wiederholungen können kumulieren. Der Endwert der Animation kann eingefroren werden oder der Wert springt nach Abschluss der Animation zurück auf den darunterliegenden Wert. Die sogenannte Animationseffektfunktion F(t,u) schließt anders als die einfache Animationsfunktion den Einfluss des darunterliegenden Wertes, von Wiederholungen und des Einfrierens mit ein. Während die einfache Animationsfunktion nur über die einfache Animationsdauer definiert ist, ist die Animationseffektfunktion über die gesamte aktive Animationsdauer definiert (englisch: active duration).

Modell des Zeitablaufs

Animationsdauern, der Beginn und das Ende einer Animation und die Unterteilung in verschiedene Interpolationsabschnitte durch die Liste der Werte im Attribut values legen Zeitintervalle fest. Für die deklarative Animation ist ein einheitliches Modell für die Intervalle und den Zeitablauf festgelegt. Dabei gehört der Anfang eines Intervalles zum Intervall und das Ende ist ausgeschlossen. So ist sichergestellt, dass, wie für die Animationsfunktionen notwendig, immer exakt ein Wert zu jedem Zeitpunkt gegeben ist. Lediglich für einen möglichen eingefrorenen Endwert nach der aktiven Dauer der Animation gibt es einige Sonderregeln, die im Wesentlichen darauf hinauslaufen, dass sich dieser Endwert als Grenzwert des Verlaufes der Werte innerhalb des Intervalles gegen das Ende ergibt. Bei einem stetigen Verlauf deckt sich dies immer mit dem Wert, der sich ergäbe, wenn das Ende des Intervalles eingeschlossen wäre. Lediglich wenn zum Endzeitpunkt der Verlauf nicht stetig ist, ist der Grenzwert innerhalb des aktuellen Intervalles von praktischem Belang. (Diesbezüglich gibt es in SMIL 2 und 3 relativ zur SMIL Animationsempfehlung, welche für SVG 1.1 relevant ist, leider einige Inkonsistenzen. SVG tiny 1.2 bezieht sich zwar auf SMIL 2.1, eine Sonderregel für SVG gewährleistet aber das gleiche Verhalten in SVG tiny 1.2 wie in SVG 1.1).

Das Sandwich-Modell

Eine Animation ändert nicht direkt den Wert eines Attributes im Dokument-Objekt-Modell. Stattdessen wird ein Präsentationswert animiert, unabhängig vom Dokument-Objekt-Modell, von CSS oder einem anderen möglichen Modell. Der Präsentationswert wird angezeigt und verändert nicht den Wert im Dokument-Objekt-Modell oder im CSS.

Dieses Vorgehen erfordert, die Präsentationswerte verschiedener Animationen zu verwalten und in einer definierten Reihenfolge, der Priorität anzuwenden. Animationen mit höherer Priorität können die Effekte von Animationen mit niedrigerer Priorität überschreiben. Oder die Animationen mit niedrigerer Priorität dienen als der darunterliegende Wert der Animation mit höherer Priorität. So sind ganz verschiedene Lagen oder Schichten von Animationen zu verwalten, ähnlich wie es in einem Sandwich verschiedene Schichten gibt, die aufeinanderliegen.

Im sogenannten Sandwich-Modell wird in SMIL festgelegt, mit welcher Priorität Animationen behandelt werden, welche auf dasselbe Zielattribut desselben Zielelementes wirken. Das Modell legt auch fest, wie die Priorität der Animation einer Eigenschaft relativ zur Animation des korrespondierenden Präsentationsattributes ist.

Beziehen sich mehrere Animationen auf dasselbe Attribut desselben Zielelementes, so hat jene höhere Priorität, welche später beginnt. Da Animationen mehrfach beginnen können, bestimmt sich so die Priorität mit jedem Beginn erneut. Beginnen Animationen zum gleichen Zeitpunkt, so entscheidet die Reihenfolge im Quelltext über die Priorität. Die weiter hinten im Quelltext stehende Animation hat die höhere Priorität. Es gibt auch die Möglichkeit, dass bei zwei gleichzeitig beginnenden Animationen eine Animation von der anderen abhängt, zum Beispiel, dass der Beginn der einen vom Beginn der anderen abhängt. In solch einem Falle wird angenommen, dass die abhängige Animation der synchronisierenden mit höherer Priorität folgt, auch wenn die Reihenfolge im Quelltext anders angeordnet ist.

Das Sandwich-Modell ersetzt nicht die ansonsten definierten Regeln, wie Attribute oder Eigenschaften verarbeitet werden. Wird speziell ein Präsentationsattribut animiert und zur gleichen Zeit die korrespondierende CSS-Eigenschaft, so gilt nach wie vor die in CSS definierte Kaskade, bei der das Präsentationsattribut eine sehr niedrige Spezifität hat, die von einer CSS-Eigenschaft mit höherer Spezifität überschrieben wird. Auch wenn das Präsentationsattribut animiert wird, hat eine CSS-Angabe in einer CSS-Stilvorlage eine höhere Spezifität als das animierte Präsentationsattribut, welches so mit der Eigenschaft überschrieben wird. Es gibt keinen sichtbaren Animationseffekt. Wird auch die CSS-Eigenschaft animiert, so wird das Resultat der Animation des Präsentationsattributes und der CSS-Stilvorlage als darunterliegender Wert der Animation der CSS-Eigenschaft verwendet. Aufgrund der hohen Spezifität der !important-Regel in einer Stilvorlage des Benutzers überschreibt diese allerdings wieder einen Animationseffekt für dieselbe CSS-Eigenschaft.

Bei additiven Animationen können Zwischenergebnisse außerhalb des erlaubten Bereiches liegen, etwa bei Farben oder Opazitäten. In solchen Fällen soll vom Darstellungsprogramm nur der letztlich angezeigte Wert auf den erlaubten Bereich eingschränkt werden, nicht mögliche Zwischenergebnisse, weil sich durch die Addition aller Animationen wieder ein korrekter Wert ergeben kann, was bei einer Korrektur von Zwischenergebnissen zu einem anderen, falschen Resultat führen könnte.

Anfragen oder Manipulationen mit Skriptsprachen wie ecma-script beziehen sich auf den Wert im Dokument-Objekt-Modell und nicht auf den durch die Animationen resultierenden Präsentationswert. Der per Skript manipulierte Wert im Dokument-Objekt-Modell hat also im Sandwich-Modell die gleiche niedrige Priorität wie der nicht manipulierte Wert.

Animationsziel identifizieren

Ein Darstellungsprogramm muss immer identifizieren können, auf welches Element, welches Attribut oder welche Eigenschaft sich eine Animation bezieht. Zu dem Zweck sind teils spezielle Attribute verfügbar, teils wird diese Information impliziert.

Zielelement

SVG
1.1	1.7 (teilweise; Problem bei exotischen Fällen)	9	4	-	4	?	?	?

Das Zielelement einer Animation wird mit dem Attribut href von XLink angegeben. Mit diesem Attribut stehen dann auch die anderen Attribute von XLink bei Animationselementen zur Verfügung.

Beim Zielelement ist also mit dem Attribut id (oder bei SVG tiny 1.2 alternativ auch xml:id) ein Fragmentidentifizierer anzugeben. Für das Animationselement kann dann das Attribut href von XLink notiert werden mit dem Fragmentidentifizierer des Zielelementes als Wert, einschließlich des vorangestellten '#'. Das Zielelement liegt immer im selben Dokument wie das Animationselement. Gibt es das angegebene Zielelement nicht im selben Dokument, so liegt in SVG 1.1 ein Fehler vor und die Darstellung des Dokumentes wird abgebrochen. In SVG tiny 1.2 hingegen wird die Animation in solch einem Falle zwar durchgeführt, hat im Sinne von SMIL aber keinen Effekt. Dies bedeutet, die Animation kann zur Synchronisation anderer Animationen verwendet werden, hat selbst aber keinen direkten Einfluss auf die Präsentation.

Wird alternativ href von XLink nicht notiert, so ist das Elternelement des Animationselementes das Zielelement der Animation.

Beispiel zur Verwendung von href von XLink:

<defs xmlns:xlink="http://www.w3.org/1999/xlink">
<animateMotion xlink:href="#c" dur="12s" values="0,300;400,0;400,300;0,300" />
</defs>
<circle id="c" r="15" />

Das mittels href von XLink angegebene Zielelement ist also der Kreis, welcher mittels id="c" identifiziert ist. Sofern bereits bei einem anderen Elternelement passiert, muss der Namensraum für XLink natürlich nicht erneut angegeben werden.

Bei folgendem Beispiel ist das Elternelement circle des Animationselementes animateMotion Zielelement der Animation, weil href von XLink nicht notiert worden ist:

<circle r="15">
<animateMotion dur="12s" values="0,300;400,0;400,300;0,300" />
</circle>

Beispiele zum Identifizieren des Animationszielelementes

Beispiele zum Identifizieren des Animationszielelementes
Verschiedene Methoden, das Animationszielelement zu identifizieren, einschließlich eines exotischen Falles unüblicher Notation für den Namensraum von XLink, die Autoren nicht zu empfehlen ist.

Alle blauen Rechtecke vergrößern ihre Höhe, so dass sie immer exakt in den dunkelblauen Rahmen passen, der von diesen immer komplett ausgefüllt wird.

Zielattribut

SVG
1.1	1.7 (teilweise, Problem mit Namensräumen)	9	4	-	4 (teilweise, Problem mit Namensräumen)	?	?	?

Das Zielattribut einer Animation wird mit dem Animationsattribut attributeName angegeben. Dies entfällt bei animateMotion, bei welchem dies als spezielle Translationstransformation impliziert wird. Für die anderen Animationselemente ist die Angabe des Attributes in SVG 1.1 erforderlich. Fehlt das Attribut oder ist der Wert nicht anwendbar, liegt ein Fehler vor, der zum Abbruch der Darstellung des Dokumentes führt. In SVG tiny 1.2 ist die Angabe zwar optional, die Animation hat aber im Sinne von SMIL keinen Effekt (kann also allenfalls zur Synchronisation anderer Animationen verwendet werden), wenn der Wert nicht anwendbar ist oder das Attribut nicht notiert ist.

Sofern das Attribut zu einem im Dokument definierten Namensraum gehört, ist das entsprechende Präfix ebenfalls zu notieren, sofern das Attribut nicht zu einem Namensraum gehört, der so festgelegt ist, dass kein Präfix notwendig ist (typisch der für SVG in einem SVG-Dokument). Das Präfix wird dann so interpretiert, wie es für das Animationselement definiert ist, was bei einer entprechenden anderen Angabe für das Zielelement anders sein kann. Entscheidend ist im Zweifelsfalle also immer der Namensraum, der im Animationselement für das Präfix definiert ist. Es ist also insbesondere nicht relevant, welches Präfix beim Zielelement notiert ist. Ärger kann sich ein Autor ersparen, wenn für einen Namensraum pro Dokument exakt ein Präfix im Hauptelement svg notiert wird.

Beispiele:

<circle r="20">
<animate attributeName="r" dur="12s" values="0;100;50;400;10;500;100;300;60" />
</circle>

Als Zielattribut wird mit attributeName das Attribut r festgelegt. Das Elternelement des Animationslementes animate ist hier ein Element circle, folglich wird der Radius dieses Kreises animiert.

<image xmlns:xlink="http://www.w3.org/1999/xlink"
       width="30" height="20" xlink:href="P0.png">
  <animate attributeName="xlink:href" dur="120s"
    values="P1.png;P2.jpeg;P3.PNG;P4.JPG;P5.jpg;P6.png" />
</image>

Das Attribut href von XLink wird für das Element image animiert, was zur Folge hat, dass ein paar Bilder nacheinander angezeigt werden, also eine Art Diaschau. Das Präfix für den Namensraum von XLink ist hier direkt in der Anfangsmarkierung des Elementes image definiert, ist oft auch bei einem anderen Elternelement definiert und ist hier für das Element animate das gleiche wie für image, die Zuordnung ist also unproblematisch.

Beispiele Animationsattribut attributeName

Beispiele Animationsattribut attributeName
Verschiedene Methoden, das Animationszielattribut zu identifizieren, einschließlich einiger exotischer Fälle unüblicher Notationen für den Namensraum von SVG oder XLink, die Autoren nicht zu empfehlen sind. Andererseits kann es in Dokumenten mit mehreren Formaten durchaus vorkommen, dass ein Namensraum für SVG explizit als Präfix angegeben wird.

Alle blauen Rechtecke vergrößern ihre Höhe, so dass sie immer exakt in den dunkelblauen Rahmen passen, der von diesen immer komplett ausgefüllt wird.

Zielattributstyp

SVG
1.1	-	9 (teilweise)	4 (teilweise)	-	-	?	?	?

Nun kommt es vor, dass sowohl ein Präsentationsattribut als auch eine Eigenschaft mit gleichem Namen existiert. Das ergibt vor allem ein Problem, weil es für CSS-Eigenschaften keinen eigenen Namensraum gibt. Folglich kann auch festgelegt werden, welches von beiden animiert werden soll. Dieser Angabe dient das Animationsattribut attributeType.

Bei animateMotion ist auch das Attribut attributeType nicht anwendbar. Bei animateMotion ist das Zielattribut bereits eindeutig impliziert.

Werden nur Präsentationsattribute verwendet und keine Stilvorlagen, so ist die Angabe dieses Attributes weder notwendig, noch sinnvoll. Insbesondere ist die Angabe innerhalb eines Dokumentes des Profils SVG tiny 1.1 nicht sinnvoll, weil dort gar keine Stilvorlagen interpretiert werden. Auch wenn Stilvorlagen interpretiert werden, ist zumindest in SVG die Angabe des Attributes in der Regel nicht notwendig, weil Attribut und Eigenschaft die gleiche Bedeutung haben und das notierte Präsentationsattribut mit niedriger Spezifität in die Kaskade der Stilvorlage integriert ist.

Ferner ist die Funktionalität so definiert, dass in SVG nicht anwendbare Eigenschaften auch nicht Ziel der Animation sein können. Zum Beispiel tritt das Problem theoretisch auf bei CSS-Eigenschaften wie width und height, weil in SVG Elemente wie rect Attribute gleichen Namens haben. Weil aber die CSS-Eigenschaften nicht anwendbar sind, werden ohne Angabe von attributeType die Attribute animiert und nicht die gleichnamigen Eigenschaften, die keinen Effekt hätten.

Mögliche Werte von attributeType sind:

XML

Es wird das Attribut (aus dem Namensraum des Zielelementes) animiert, sofern es dieses gibt.

CSS

Es wird die Eigenschaft animiert, sofern es eine solche gibt.

auto

Sofern es eine anwendbare Eigenschaft gibt, wird diese animiert, sonst das Attribut (aus dem Namensraum des Zielelementes, wenn kein Präfix angegeben ist), sofern es dieses gibt.

'auto' ist die Voreinstellung, wenn das Attribut nicht notiert ist. Wenn es das Zielattribut, beziehungsweise die Zieleigenschaft nicht gibt, hat die Animation im Sinne von SMIL keinen Effekt (kann also allenfalls zur Synchronisation anderer Animationen verwendet werden). Das Attribut oder die Eigenschaft müssen nirgends explizit notiert sein, sie müssen nur auf das Zielelement anwendbar sein, damit die Animation einen Effekt haben kann.

Zu unterscheiden ist hier auch von der geplanten deklarativen CSS-Animation. Dabei handelt es sich um einen Arbeitsentwurf, der leider mit SMIL komplett inkompatibel ist. Sofern das einmal eine Empfehlung wird, reiht sich eine solche CSS-Animation dann in die Kaskade ein hat also die Priorität der Stilvorlage in der sie steht. Somit hat folglich eine Animation mit attributeType CSS oder auto (sofern das dann eine Eigenschaft animiert) eine höhere Priorität. Beim geplanten SVG2 werden einige SVG-Attribute in Präsentationsattribute und Eigenschaften umdefiniert, weswegen dort mehr Animationsziele als Attribut oder Eigenschaft angesprochen werden können. Die in den folgenden Beispielen genannten Fälle, wo eine Eigenschaft nicht existiert, kann sich damit dann für SVG2 ändern. Bei zukünftigen Versionen von Darstellungsprogrammen muss da erfahrungsgemäß dann in solchen Situationen auch in Dokumenten mit der Version 1.1 oder tiny 1.2 gehäuft mit Problemen gerechnet werden, was es sinnvoll erscheinen lässt, bereits jetzt im Dokument die Struktur einfach zu halten, so dass eine Unterscheidung mit attributeType nicht notwendig ist.

Beispiele:

<circle r="20">
<animate attributeName="fill"
         dur="9s" values="blue;green" />
</circle>

Weil attributeType nicht gesetzt ist, wird die Eigenschaft fill des Kreises von blau nach grün animiert.

Dies hat den gleichen Effekt wie folgendes Beispiel:

<circle r="20">
<animate attributeName="fill" attributeType="auto"
         dur="9s" values="blue;green" />
</circle>

Für Autoren meist wohl unerwünschte Ergebnisse werden bei folgendem Beispiel erzielt:

<circle r="20" style="fill:blue">
<animate attributeName="fill" attributeType="XML"
         dur="9s" values="#a00;#f60" />
</circle>

Weil attributeType auf 'XML' gesetzt ist, wird das Präsentationsattribut fill im roten Bereich animiert. Das (animierte) Präsentationsattribut hat in der CSS-Kaskade allerdings eine niedrigere Spezifität als die ebenfalls angegeben Eigenschaft fill. Die Animation wird also von der Eigenschaft überschrieben und hat keinen sichtbaren Effekt.

<circle r="20" fill="red">
<animate attributeName="fill" attributeType="CSS"
         dur="9s" values="#00a;#0cf" additive="sum" />
</circle>

Weil attributeType auf 'CSS' gesetzt ist, wird die Eigenschaft fill animiert. Das Präsentationsattribut fill ist mit niedriger Spezifität in der CSS-Kaskade und dessen Wert dient daher als darunterliegender Wert der Animation. Da diese additiv ist (was später noch erläutert wird), addiert sich die Animation zum darunterliegenden Wert und das Resulat ist eine Animation im violetten Bereich.

Dies in einem Dokument vom Profil SVG tiny 1.1 hätte hingegen einen anderen Effekt. Weil Stilvorlagen nicht interpretiert werden, wäre das Ergebnis einfach eine rote Füllung.

<circle r="20" fill="red">
<animate attributeName="fill" attributeType="CSS"
         dur="9s" values="#00a;#00f" additive="sum" />
<animate attributeName="fill" attributeType="XML"
         dur="9s" values="#060;#0f0" additive="sum" />
</circle>

Hier ergibt die additive Animation des Präsentationsattributes fill zunächst eine Animation im orangen Bereich. Der zeitabhängige Wert ist mit niedriger Spezifität in der CSS-Kaskade und der Wert dient wiederum als darunterliegender Wert der additiven Animation vom attributeType 'CSS'. Letztlich ist das Ergebnis eine Animation von #f6a nach #fff, also von rosa-violett nach weiß. Kürzer könnte dies also geschrieben werden als:

<circle r="20">
<animate attributeName="fill"
         dur="9s" values="#f6a;#fff" />
</circle>

Für SVG tiny 1.1 wäre wieder die Animation der Eigenschaft zu ignorieren und das Ergebnis wäre die Animation im orangen Bereich.

Folgendes ist ein Beispiel, bei dem der Autor vermutlich nicht verstanden hat, dass es für SVG-Elemente keine anwendbare Eigenschaft width gibt:

<rect x="100" y="100" width="20" height="100">
<animate attributeName="width" attributeType="CSS"
         dur="9s" values="60;200;30" />
<animate attributeName="height" attributeType="auto"
         dur="9s" values="60;200;30" />
</rect>

Weil die Eigenschaft width auf das Element rect nicht anwendbar ist, hat die erste Animation vom attributeType 'CSS' keinen Effekt. Es gibt auch keine anwendbare Eigenschaft height, aber das Element rect hat ein Attribut height, weswegen die zweite Animation vom attributeType 'auto' einen Effekt hat.

Weitere Beispiele:

Animationsattribut attributeType

Animationsattribut attributeType
Weil CSS-Eigenschaften eine höhere Spezifität haben als XML-Attribute, hat die CSS-Animation die XML-Animation zu überschreiben. Die Farbe der Kreise ändert sich von gelb nach blau und nicht von orange nach rot.
Falls das Darstellungsprogramm CSS nicht unterstützt, wie bei SVG tiny 1.1, sollte die Farbe sich von orange nach rot und nicht von gelb nach blau ändern. Ein Gemisch ist immer ein Fehler.

Animationsattribut attributeType (2)

Animationsattribut attributeType (2)
Verschiedene Tests werden angeboten: Falls attributeName ein Attribut identifiziert und es gibt keine Eigenschaft mit dem gleichen Namen und der attributeType ist CSS, kann es keine Animation geben.
Falls eine CSS-Eigenschaft existiert, aber nicht anwendbar ist, aber ein XML-Attribut mit dem gleichen Namen existiert, kann es keine Animation mit attributeType CSS geben.
Aber zum Beispiel font ist eine Eigenschaft ohne entsprechendes XML-Attribut, daher wird dies mit attributeType CSS animiert, aber nicht mit XML.
Falls der attributeType 'auto' ist, aber der attributeName nicht zum animierten Element passt, gibt es keine Animation.
Falls attributeType CSS ist, die animierte Eigenschaft existiert, aber nicht zum animierten Element passt, gibt es keine Animation.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Viele aktuelle Darstellungsprogramme (Stand 2012) haben Probleme mit der korrekten Implementierung einerseits des Sandwich-Modells und andererseits auch der CSS-Kaskade, weswegen es leicht zu fehlerhaften Darstellungen kommen kann. Der Autor kann dies vermeiden, indem er auf die Verwendung des Attributes style verzichtet, gar keine Stilvorlagen für Eigenschaften verwendet, die animiert werden sollen und eine explizite Angabe des Attributes attributeType vermeidet.

Die einfache Animationsdauer

SVG
1.1	1.7	8	4	3.2 (teilweise)	4	?	?	?

Mit dem Animationsattribut dur wird die einfache Animationsdauer festgelegt, also die Zeit für einen einfachen Durchlauf der Animation.

Mögliche Werte sind:

'indefinite'

die einfache Animationsdauer ist unendlich

'media'

Die intrinsische Dauer eines referenzierten Mediums legt die einfache Animationsdauer fest.

Zeitwert

Angabe eines Zeitwertes größer als 0 wie im Folgenden genauer festgelegt,

im einfachsten Falle eine Zahl für die Dauer in Sekunden. Ist der angegebene Wert von dur fehlerhaft, so wird das Attribut ignoriert, als sei es nicht angegeben worden. Ist das Attribut nicht angegeben, wird 'indefinite' angenommen.

'indefinite'

Ist 'indefinite' angegeben, wird zu Beginn der Animation der erste Wert angenommen. Es findet keine weitere Interpolation zu gegebenenfalls vorhandenen weiteren Werten statt. Dies kann sinnvoll sein, wenn nur ein Wert im Attribut values notiert ist oder set verwendet wird und keine endliche Dauer vorgesehen ist.

Die Animationsfunktion ist folglich f(t) = f(0).

'media'

Für Animationselemente wird das Attribut dur ignoriert, falls 'media' angegeben wird, weil diese Elemente keine intrinsische Dauer festlegen. In SVG tiny 1.2 gibt es allerdings zeitabhängige Elemente wie audio oder video, bei denen dieser Wert sinnvoll ist, es wird dann die vom referenzierten Dokument festgelegte Dauer als einfache Animationsdauer angenommen.

Zeitwert

Ein Zeitwert besteht aus mindestens einer positiven Zahl, optional mit direkt anschließender Einheit.

In SVG tiny sind die Einheiten 's' und 'ms' zugelassen. 's' steht für Sekunden, 'ms' für Millisekunden. In der Vollversion von SVG 1.1 gibt es weitere mögliche Einheiten, dies sind 'h' für Stunden und 'min' für Minuten.

Genaugenommen ist die Einschränkung zumindest in SVG tiny 1.1 nicht eindeutig formuliert. Die Einschränkung kann auch so interpretiert werden, dass immer eine Einheit angegeben werden muss (dann also 's', 'ms', 'min' oder 'h') oder aber auch zusätzlich im Falle von 's' die Einheit weggelassen werden kann, also nur im weiteren diskutierte gemischte Notationen ausgeschlossen werden. In SVG tiny 1.2 ist die Einschränkung auf 'ms', 's' oder keine Einheit eindeutig.

Um bei SVG tiny 1.1 Probleme zu vermeiden, kann es also sinnvoll sein, immer entweder 's' oder 'ms' als Einheit anzugeben.

Beispiele:
4 entspricht 4 Sekunden
9.342 entspricht 9.342 Sekunden
00016.2 entspricht 16.2 Sekunden
12s entspricht 12 Sekunden
138.9432s entspricht 138.9432 Sekunden
3058.63ms entspricht 3058.63 Millisekunden oder 3.05863 Sekunden
1.2min entspricht 1.2 Minuten oder 72 Sekunden
0.4h entspricht 0.4 Stunden oder 24 Minuten oder 1440 Sekunden

Alternativ dazu gibt es in der Vollversion von SVG 1.1 noch zwei weitere mögliche Notationen.

Die eine besteht darin, exakt zwei Ziffern für Minuten zu notieren (Bereich 00 bis 59), gefolgt von einem Doppelpunkt, gefolgt von exakt weiteren zwei Ziffern für Sekunden (Bereich 00 bis 59). Darauf kann optional ein Punkt folgen, gefolgt von mindestens einer weiteren Ziffer für Bruchteile eine Sekunde.

Beispiele:
01:00 entspricht 1 Minute oder 60 Sekunden
02:38 entspricht 2 Minuten und 38 Sekunden oder 158 Sekunden
01:00.45 entspricht 1 Minute und 0.45 Sekunden oder 60.45 Sekunden oder 60450 Millisekunden

Die andere Möglichkeit besteht darin, eine beliebige positive Anzahl von Ziffern für Stunden zu notieren, direkt gefolgt von einem Doppelpunkt, direkt gefolgt von exakt zwei Ziffern (Bereich 00 bis 59) für Minuten, gefolgt von einem Doppelpunkt, gefolgt von exakt weiteren zwei Ziffern (Bereich 00 bis 59) für Sekunden. Darauf kann optional ein Punkt folgen, gefolgt von mindestens einer weiteren Ziffer für Bruchteile eine Sekunde.

Beispiele:
00:02:38 entspricht 2 Minuten und 38 Sekunden oder 158 Sekunden
00:01:00.45 entspricht 1 Minute und 0.45 Sekunden oder 60.45 Sekunden oder 60450 Millisekunden
01:01:00 entspricht 1 Stunde und 1 Minute oder 61 Minuten oder 3660 Sekunden
02:00:32.14 entspricht 2 Stunden und 32.14 Sekunden oder 7232.14 Sekunden
1234:07:00.2 entspricht 1234 Stunden, 7 Minuten und 200 Millisekunden oder 4442820.2 Sekunden

Insgesamt ist es erlaubt, vor und hinter dem Wert Leerzeichen zu notieren, aber nicht innerhalb des Wertes.

Einfache Angabe der Animationsdauer

Gemischte Angabe der Animationsdauer

Einfache Angabe der Animationsdauer
Verschiedene Methoden, die einfache Animationsdauer mit Einheitsangabe zu definieren.

Alle blauen Rechtecke vergrößern ihre Höhe, so dass sie immer exakt in den dunkelblauen Rahmen passen, der von diesen immer komplett ausgefüllt wird.

Gemischte Angabe der Animationsdauer
Verschiedene Methoden, die einfache Animationsdauer mit zu definieren. Verwendet werden vor allem Notationen mit kombinierten Angaben von Sekunden, Minuten und Stunden.

Die blauen Rechtecke drehen sich mit der gleichen Winkelgeschwindigkeit. Wird etwas Rotes sichtbar, ist ein Fehler aufgetreten.

Listen für den Beginn und das Ende einer Animation

Mit den Attributen begin und end können Zeitpunkte für Beginn und Ende einer Animation angegeben werden. Für beides gibt es diverse Möglichkeiten, einen Wert zu notieren oder eine Abhängigkeit von Beginn und Ende anzugeben. Ferner ist genau festgelegt, wie diese Listen interpretiert werden. Aus den Listen, die der Autor angibt, erzeugt das Darstellungsprogramm eigene Listen, in die die jeweiligen Zeiten explizit in Dokumentzeit eingetragen werden. Einige der Zeitpunkte werden erst im Verlauf der Dokumentzeit aufgelöst, diese werden auch dann erst in die Listen eingetragen. Einige Einträge werden auch wieder gelöscht, andere verbleiben dauerhaft in den Listen.

Der Wert ist eine Liste von Werten, welche jeweils mit einem Semikolon voneinander getrennt werden. Optionale Leerzeichen vor und nach dem Semikolon sind ebenfalls erlaubt.

Ist end notiert, so wird zum aktuellen Wert von begin der kleinste spätere Wert in der der Liste für end gesucht, um ein Zeitintervall für die zu beginnende Animation festzulegen. Gibt es nur frühere Werte in der Liste für end, so gibt es ein solches Intervall nicht und die Animation kann nicht beginnen. Diese Einschränkung gibt es nicht, wenn kein end notiert ist.

Mögliche Werte der Listen sind:

Zeitversatz

Ein Zeitwert, wie für dur definiert, mit optionalem '+' oder '-' vorangestellt; bezeichnet einen Zeitversatz relativ zum Beginn des Dokumentes

Synchronisationswert

Identifiziert eine andere Animation oder ein zeitabhängiges Element zum Zwecke der Synchronisation

Ereigniswert

Identifiziert ein Ereignis als Synchronisation

Wiederholungsereignis

Ein Ereignis der Wiederholung einer Animation dient der Synchronisation

Tastaturereignis

Das Betätigen einer Taste der Tastatur dient als Synchronisation

Uhrzeit

Eine Uhrzeit notiert im internationalen Format für Datum und Uhrzeit dient als Synchronisation. Dieser Wert ist in SVG tiny 1.2 nicht verfügbar.

'indefinite'

Kein endlicher Wert ist festgelegt. Die Sychronisation kann durch ein externes Ereignis ausgelöst werden (DOM oder Verweis).

Die Werte werden in folgenden Abschnitten genauer beschrieben.

Beginn der Animation

SVG
1.1	1.7 (teilweise)	8 (teilweise)	4 (teilweise)	3.2 (teilweise)	4 (teilweise)	?	?	?

Mit dem Attribut begin wird eine Liste von Zeitpunkten angegeben, zu denen die Animation aktiv werden soll oder beginnen soll. Ist das Attribut nicht angegeben, entspricht dies dem Wert '0', also dem Dokumentbeginn.

Einfaches Beispiel:

<circle r="15">
<animateMotion dur="12s" begin="6"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt 6 Sekunden nach Dokumentbeginn.

Liegt der Beginn einer Animation in der Vergangenheit, so beginnt die Präsentation der Animation unmittelbar sofort, als habe sie zum angegebenen Zeitpunkt in der Vergangenheit bereits begonnen, es sei denn, das Ende liegt auch bereits in der Vergangenheit. Die Animation wird also nur begonnen, wenn der aktuelle Zeitpunkt innerhalb des Intervalles der aktiven Animationsdauer liegt.

Verschiedene Möglichkeiten, Animationen zu beginnen

Verschiedene Möglichkeiten, Animationen zu beginnen
Blaue Quadrate werden entlang eines quadratischen Pfades bewegt. Neben einem Start nach 5s kann die Animation des größten Quadrates durch die Knöpfe rechts aktiviert werden, deren title-Elemente das entsprechende Ereignis angeben. Zudem kann mit der Taste b gestartet werden.

Die anderen Quadrate werden mit Synchronisationswerten oder einem Wiederholungswert gestartet.

Ende der Animation

SVG
1.1	1.7 (teilweise)	8 (teilweise)	4 (teilweise)	3.2 (teilweise)	4 (teilweise)	?	?	?

Mit dem Attribut end wird eine Liste von Zeitpunkten angegeben, zu denen die Animation beendet werden soll. Dies erlaubt es, die aktive Dauer einer Animation einzuschränken. Ist das Attribut nicht angegeben, gibt es keine Einschränkung der aktiven Dauer durch dies Attribut. Dies Verhalten entspricht keinem angebbaren Attributwert.

Einfaches Beispiel:

<circle r="15">
<animateMotion dur="12s" begin="6" end="16"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt 6 Sekunden nach Dokumentbeginn und endet bereits 10s nach Dokumentbeginn, die aktive Animationsdauer beträgt also nur 10s. Die Animation erreicht also nicht den Endpunkt 0,300, sondern springt nach 16s zurück zum darunterliegenden Wert.

Verschiedene Möglichkeiten, Animationen zu beenden

Verschiedene Möglichkeiten, Animationen zu beenden
Blaue Quadrate werden entlang eines quadratischen Pfades bewegt. Neben einem Start nach 5s kann die Animation des größten Quadrates durch aktivieren, anklickern oder Taste b gestartet werden.

Neben einem Ende nach 10s kann die Animation des größten Quadrates durch die Knöpfe rechts aktiviert werden, deren title-Elemente das entsprechende Ereignis angeben. Zudem kann sie mit der Taste e beendet werden.

Die anderen Quadrate werden mit einem Synchronisationswert gestartet und mit Synchronisationswerten oder einem Wiederholungswert beendet.

Zeitversatz

SVG
1.1	1.7 (teilweise)	9.5 (ab 8 teilweise)	4 (teilweise)	3.2 (teilweise)	4 (teilweise)	?	?	?

Ein Zeitversatz ist ein Zeitwert wie für dur definiert, optional mit vorangestelltem Vorzeichen '+' oder '-', optional mit Leerzeichen vor oder nach dem Vorzeichen. Der Zeitwert beschreibt einen Versatz relativ zum zeitlichen Beginn des Dokumentes. Kein Vorzeichen oder das '+' steht für einen positiven Versatz, die Animation beginnt dann entsprechend später als der Dokumentbeginn. '-' entspricht einem negativen Zeitversatz und beschreibt einen Zeitpunkt vor Dokumentbeginn.

Wenn sowohl der Beginn als auch das Ende der aktiven Dauer einer Animation vor dem Dokumentbeginn liegen, so startet die Animation nicht und kann auch nicht zur Sychronisation verwendet werden. Ansonsten ist nur der Teil der Animation sichtbar, welcher nach dem Dokumentbeginn liegt.

Einfache Beispiele:

<circle r="15">
<animateMotion dur="12s" begin="-6s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt formal -6 Sekunden zum Dokumentbeginn, also davor. Das bedeutet, die sichtbare Präsentation beginnt kurz hinter der oberen rechten Ecke des Dreiecks und endet 6s nach Dokumentbeginn, weil dur als 12s angegeben ist.

<circle r="15">
<animateMotion dur="12s" begin="6s; 60s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt nach 6s, endet nach der einfachen Animationsdauer, also nach 18s und startet erneut nach 60s und endet wieder nach 72s.

<circle r="15">
<animateMotion dur="12s" begin="-6s" end="-2.1s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Weil sowohl begin als auch end vor Dokumentbeginn liegen, startet die Animation nicht.

<circle r="15">
<animateMotion dur="12s" begin="5s" end="30s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die einfache Animationsdauer ist kürzer als die Differenz zwischen begin und end, daher wird die aktive Animationsdauer nicht eingeschränkt.

<circle r="15">
<animateMotion dur="12s" begin="5s" end="6s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die einfache Animationsdauer ist länger als die Differenz zwischen begin und end, daher wird die aktive Animationsdauer auf die Differenz von einer Sekunde eingeschränkt.

<circle r="15">
<animateMotion dur="12s" begin="10s" end="5s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Das einzige end liegt vor dem einzigen begin, die Animation wird nicht gestartet.

<circle r="15">
<animateMotion dur="12s" begin="2s;6s" end="10s;12s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt 2 Sekunden nach Dokumentbeginn und erneut 6s nach Dokumentbeginn und endet 10 Sekunden nach Dokumentbeginn. Der zweite Endwert von 12s hat keine Auswirkungen, weil zu dem Zeitpunkt die Animation nicht mehr aktiv ist.

<circle r="15">
<animateMotion dur="12s" begin="2s;20s" end="10s;25s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Animation beginnt 2s nach Dokumentbeginn und endet 10s nach Dokumentbeginn, beginnt erneut 20s nach Dokumentbeginn und endet 5s später.

Einfacher Zeitversatz

Einfacher Zeitversatz
Verschiedene Methoden, Anfang und Ende einer Animation mit einem Zeitversatz relativ zum Dokumentbeginn anzugeben.

Alle blauen Rechtecke vergrößern ihre Höhe, so dass sie immer exakt in den dunkelblauen Rahmen passen, der von diesen immer komplett ausgefüllt wird.

Wird etwas Rotes sichtbar oder passen die blauen Rechtecke nicht in den Rahmen, ist ein Fehler aufgetreten.

Zeitversatz, kombinierte Zeitangaben

Zeitversatz, kombinierte Zeitangaben
Verschiedene Methoden, Anfang und Ende einer Animation mit einem Zeitversatz relativ zum Dokumentbeginn anzugeben.

Verwendet werden vor allem Notationen mit kombinierten Angaben von Sekunden, Minuten und Stunden.

Die Animationen beginnen 74.0s Sekunden nach Dokumentbeginn und enden 740.4 Sekunden (12.34 Minuten) nach Dokumentbeginn.

Die blauen Rechtecke drehen sich mit der gleichen Winkelgeschwindigkeit. Wird etwas Rotes sichtbar, ist ein Fehler aufgetreten.

Zeitversatz, kombinierte Zeitangaben

Zeitversatz, kombinierte Zeitangaben
Verschiedene Methoden, Anfang und Ende einer Animation mit einem Zeitversatz relativ zum Dokumentbeginn anzugeben.

Verwendet werden vor allem Notationen mit kombinierten Angaben von Sekunden, Minuten und Stunden.

Die Animationen beginnen 74.0s Sekunden vor Dokumentbeginn und enden 740.4 Sekunden (12.34 Minuten) nach Dokumentbeginn. Negative Zeiten für end sind auch angegeben, da diese allerdings allesamt vor dem Beginn der Animation liegen und ein weiterer Wert dahinter liegt, sind die negativen Endwerte nicht anwendbar.

Die blauen Rechtecke drehen sich mit der gleichen Winkelgeschwindigkeit. Wird etwas Rotes sichtbar, ist ein Fehler aufgetreten.

Zeitversatz, Listen

Zeitversatz, Listen
Ein blaues Quadrat wird entlang eines quadratischen Pfades bewegt. Listen für begin und end werden notiert.

Die Animationen werden verglichen mit Einzelanimationen eines roten Quadrates, welches sich immer direkt hinter dem blauen befindet.

Wird etwas Rotes sichtbar, ist ein Fehler aufgetreten.

Synchronisationswert

SVG
1.1	1.7 (für end nur teilweise)	9 (nur teilweise für end und ab 8 teilweise für begin)	4 (teilweise)	3.2 (teilweise)	4 (teilweise, gar nicht für end)	?	?	?

Mit einem Synchronisationswert wird ein anderes Animationselement zur Synchronisation verwendet. Beim zur Synchronisation zu verwendenden Animationselement ist ein Attribut id (oder auch xml:id in SVG tiny 1.2) mit einem Fragmentidentifizierer zu notieren.

Als Synchronisationswert ist dann der Fragmentidentifizierer zu notieren, dann ein Punkt '.' und dann eines der Schlüsselwörter 'begin' oder 'end' nach optionalen Leerzeichen kann dann optional ein Zeitversatz notiert werden, dessen genaue Syntax bereits beschrieben wurde. Der Zeitversatz ist dann relativ zum Synchronisationswert gemeint, nicht zum Dokumentbeginn.

Einfache Beispiele:

<circle r="15">
<animate id="bsp" attributeName="stroke" values="red" begin="20s;120s" end="25s;130s" />
<animateMotion dur="12s" begin="bsp.begin+2s;bsp.end-1s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Mit animate wird der Strich des Kreises 20s nach Dokumentbeginn auf rot gesetzt. Dies endet mit der Endzeit von 25s. Ein weiterer Beginn liegt bei 120s mit einer Endzeit bei 130s.
begin und end werden zur Synchronisation des Beginns von animateMotion verwendet. Der Beginn ist festgelegt auf zwei Sekunden nach jedem Beginn der Strich-Animation und eine Skunde vor dem Ende der Strichanimation. Die Bewegung beginnt also in Dokumentzeit bei 22s, 24s, 122s, 129s.

<circle r="15">
<animate id="bsp" attributeName="stroke" values="red" begin="20s;120s" end="25s;130s" />
<animateMotion dur="12s" begin="bsp.end+2s" end="bsp.begin+15s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Bei diesem Beispiel dient wieder die Strich-Animation zur Synchronisation. Die Angabe zu begin ist äquivalent zu begin="27s;132s", die Angabe zu end ist äquivalent zu end="35s;135s".

Schleife durch gekoppelte Animationen

Schleife durch gekoppelte Animationen
Blaue Quadrate werden entlang eines Pfades bewegt.

Für Beginn und Ende werden zum großen Teil Synchronisationswerte mit Zeitversatz verwendet. Durch eine geschlossene Schleife mit zwei Animationen wird gewährleistet, dass die Animationen immer wieder gestartet werden.

Schleifen und gekoppelte Animationen

Schleifen und gekoppelte Animationen
Blaue Quadrate werden entlang eines Pfades bewegt.

Für Beginn und Ende werden zum großen Teil Synchronisationswerte mit Zeitversatz verwendet. Durch zwei geschlossene Schleifen mit jeweils zwei Animationen wird gewährleistet, dass die Animationen immer wieder gestartet werden. Die fünfte Animation bezieht Anfang und Ende von beiden Schleifen, hat daher keinen kurzzeitig gleichmäßigen wiederholten Ablauf.

Ereigniswert

SVG
1.1	1.7 (teilweise)	9 (teilweise, in geringem Umfange ab 8)	4-8 (teilweise) ab 9 nicht mehr	-	4 (teilweise)	7 (teilweise)	?	?

Animationen können auch mit Ereignissen begonnen oder beendet werden. Dazu werden Ereigniswerte notiert.

Es kann ebenfalls notiert werden, welches Element der Empfänger des Ereignisses sein soll. Die Angabe ist optional. Erfolgt sie nicht, ist das Zielelement der Animation auch der Empfänger des Ereignisses (nicht zwangsläufig das Elternelement).

Beim Empfänger des Ereignisses ist ansonsten ein Attribut id (oder auch xml:id in SVG tiny 1.2) mit einem Fragmentidentifizierer zu notieren. Als Empfänger des Ereignisses ist dann optional der Fragmentidentifizierer zu notieren, dann ein Punkt '.' und dann eines der Schlüsselwörter für ein Ereignis. Nach optionalen Leerzeichen kann dann optional ein Zeitversatz notiert werden, dessen genaue Syntax bereits beschrieben wurde. Der Zeitversatz ist dann relativ zum Ereignis gemeint, nicht relativ zum Dokumentbeginn.

Autoren sollten immer bedenken, dass die späteren Nutzer eines Dokumentes nicht von allein erkennen können, wie eine Animation gestartet wird, es wird daher in der Regel sinnvoll sein, gewisse Konventionen zu vermitteln oder Beschreibungen beizufügen, wie ein interaktives Dokument genutzt werden kann. Der spätere Nutzer wird die Gedankengänge des Autors nur selten erahnen können. Was der Autor für selbstverständlich oder effektiv hält, muss für den Nutzer noch lange nicht klar sein. Eine für den Autor eingängige Symbolik mag für einige Nutzer komplett unverständlich sein. Der Autor sollte nicht davon ausgehen, dass seine Vorstellungen objektivierbar sind und für den Nutzer nachvollziehbar sind. Auch an sich geniale und ergonomische Lösungen bedürfen oft erst einmal Hilfen, um den Nutzer an die prinzipielle Idee heranzuführen, um dann auch wirklich von der Lösung profitieren zu können.

Für Ereignisse gibt es folgende Schlüsselwörter, einschließlich einer Erklärung, wann sie eintreten:

activate

Aktivierung eines Elementes, zum Beispiel mit einem Mausklick oder mit der Tastatur. Dies ist ein geräteunabhängiges Ereignis und ist daher hinsichtlich der Zugänglichkeit eine bessere Wahl als ein geräteabhängiges Ereignis.

mousedown

Knopf eines Zeigergerätes wird über dem Element gedrückt.

mouseup

Knopf eines Zeigergerätes wird über dem Element losgelassen.

click

Klickereignis bei einem Zeigergerät über dem Element, also über dem selben Element erst onmousedown dann onmouseup. In der Reihenfolge erfolgt onclick dann unmittelbar nach dem onmouseup.

mouseover

Ein Zeigergerät wird auf das Element bewegt, so dass es zuvor nicht über dem Element ist und dann über dem Element. Nicht gemeint ist, dass das Element sich unter das Zeigergerät bewegt.

mousemove

Ein Zeigergerät wird bewegt, während es sich über dem Element befindet.

mouseout

Ein Zeigergerät wird von einem Element wegbewegt, so dass es zuvor über dem Element ist und dann nicht mehr darüber. Nicht gemeint ist, dass sich das Element unter dem Zeigergerät wegbewegt.

focusin

Ein Element bekommt den Fokus, zum Beispiel wenn ein Text ausgewählt wird. In SVG 1.1 können alle Elemente ausgewählt werden. In SVG tiny 1.2 kann auch explizit angegeben werden, dass Elemente nicht auswählbar sind.

focusout

Ein Element verliert den Fokus, zum Beispiel wenn ein Text ausgewählt war und dann nicht mehr ausgwählt ist (weil zum Beispiel ein anderes ausgewählt wird).

SVGLoad (in tiny 1.2

load):Der Dokumentbeginn.

SVGUnload

Das Ende des Dokumentes, wenn dieses aus dem Anzeigebereich entfernt wird (nicht in tiny 1.2).

SVGAbort

Abbruch des Ladens des Dokumentes bevor dies komplett ist (nicht in tiny 1.2).

SVGError

Fehler beim Laden oder einer Skriptausführung (nicht in tiny 1.2).

SVGResize (in tiny 1.2

resize):Die Größe des Anzeigebereiches wird verändert.

SVGScroll (in tiny 1.2

scroll):Der Anzeigebereich wird gerollt, die Darstellung wird also relativ zum Anzeigebereich durch eine Nutzerinteraktion mit dem Darstellungsprogramm verschoben.

SVGZoom (in tiny 1.2

zoom):Die Darstellung des Dokumentes wird vergrößert oder verkleinert.

beginEvent

Beginn eines Animationselementes.

endEvent

Ende eines Animationselementes.

repeatEvent

Wiederholung einer Animation, jedesmal, wenn sich die Animation wiederholt, nach dem ersten Durchlauf.

rotate (nur tiny 1.2)

Das Dokument wird gedreht.

Beispiele:

<circle r="15">
<animateMotion dur="12s" begin="activate;click"
     values="0,300;400,0;400,300;0,300" />
</circle>

Durch aktivieren des Kreises oder klickern mit dem Zeigergerät auf den Kreis wird die Animation begonnen. Der Vorteil von 'activate' ist, dass die Animation auch begonnen werden kann, wenn kein Zeigergerät verfügbar ist. Der Vorteil, zusätzlich 'click' hinzuzufügen, besteht darin, dass so die Animation auch Nutzern zugänglich ist, die ein Darstellungsprogramm verwenden, welches aufgrund eines Fehlers 'activate' nicht verfügbar hat, dies ist zum Beispiel der Fall bei Opera bis mindestens Version 12.

<circle cx="50" r="15" fill="blue"
        xmlns:xlink="http://www.w3.org/1999/xlink">
<animateMotion xlink:href="#c" dur="12s" begin="activate;click"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" r="15" fill="green" />

Durch aktivieren/anklickern des grünen (!) Kreises wird die Animation des grünen Kreises aktiviert.

<circle id="b" cx="50" r="15" fill="blue"
        xmlns:xlink="http://www.w3.org/1999/xlink">
<animateMotion xlink:href="#c" dur="12s" begin="b.activate;b.click"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" r="15" fill="green" />

Durch aktivieren/anklickern des blauen (!) Kreises wird die Animation des grünen (!) Kreises aktiviert.

<circle id="b" r="15" fill="blue">
<animateMotion dur="12s" begin="c.activate;c.click"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" cx="50" r="15" fill="green" />

Durch aktivieren/anklickern des grünen (!) Kreises wird die Animation des blauen (!) Kreises aktiviert.

<circle r="15" fill="blue">
<animateMotion dur="12s" begin="c.mousdown" end="c.mouseup"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" cx="50" r="15" fill="green" />

Drücken des Zeigergerätes über dem grünen Kreis startet die Animation des blauen Kreises. Ein Loslasses des Zeigergerätes über dem grünen Kreis beendet die Animation vorzeitig, sofern diese noch aktiv ist.

<circle r="15" fill="blue">
<animateMotion dur="12s" begin="c.mousdown + 2s" end="c.mouseup+2s"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" cx="50" r="15" fill="green" />

Das Gleiche wie zuvor, nur jeweils mit einer Verzögerung von zwei Sekunden.

<circle r="15" fill="blue">
<animateMotion dur="12s" begin="c.mousdown - 2s" end="c.mouseup-2s"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" cx="50" r="15" fill="green" />

Das Gleiche wie zuvor, nur ist das Vorzeichen des Zeitversatzes diesmal negativ. Da das Ereignis selbst nicht vorhersagbar ist, bleiben die ersten zwei Sekunden der Animation unsichtbar und das Ende erfolgt gegebenenfalls verspätet beim Eintritt des Ereignisses.

<circle r="15" fill="blue">
<animateMotion dur="12s" begin="c.activate;c.click;60s"
     values="0,300;400,0;400,300;0,300" />
</circle>
<circle id="c" cx="50" r="15" fill="green" />

Die Animation startet durch Aktivierung des grünen Kreises, anklickern und nach 60s (nicht alternativ sondern in allen Fällen).

begin und end mit 'activate'

begin und end mit 'click'

begin und end mit 'mousedown'

begin und end mit 'mouseup'

begin und end mit 'mouseover'

begin und end mit 'mouseout'

begin und end mit 'mousemove'

begin und end mit 'focusin'

begin und end mit 'focusout'

begin und end, weitere Ereignisse (tiny 1.2-Variante)

begin und end, weitere Ereignisse (2)

Bei folgenden Beispielen kann jeweils ein Ereignis ausprobiert werden, welches im Dokumenttitel und im Dokument selbst angegeben ist. Es werden jeweils blaue Quadrate entlang eines Pfades bewegt. Grüner Knopf für Beginn und roter Knopf für Ende sowohl ohne als auch mit Zeitversatz:
begin und end mit 'activate'
begin und end mit 'click'
begin und end mit 'mousedown'
begin und end mit 'mouseup'
begin und end mit 'mouseover'
begin und end mit 'mouseout'
begin und end mit 'mousemove'

Grüner Knopf oder Text für Beginn und roter Knopf oder Text für Ende:
begin und end mit 'focusin'
begin und end mit 'focusout'

begin und end, weitere Ereignisse (tiny 1.2-Variante)
Für Beginn und Ende werden die Ereignisse load, resize, scroll, zoom und rotate verwendet. Ende jeweils 15s nach Beginn. Um resize und scroll auslösen zu können, muss das Anzeigefenster kleiner als das Dokument gewählt werden. resize bezieht sich auf eine Änderung der Fenstergröße, scroll auf ein Rollen mit einem entsprechenden Balken.

begin und end, weitere Ereignisse (2)
Für Beginn und Ende werden die Ereignisse beginEvent, endEvent und repeatEvent verwendet. Ende jeweils 15s nach Beginn. Die Ereignisse beziehen sich auf die Animation des größten Quadrates, welches mit einer einfachen Liste für begin mehrfach gestartet wird.

Wiederholungsereignis

SVG
1.1	1.7 (nicht für end)	9.5 (9 teilweise)	4 (teilweise)	-	-	?	?	?

Ein Ereignis der Wiederholung einer Animation dient der Synchronisation.

Es kann ebenfalls notiert werden, welches Animationselement zur Synchronisation dienen soll. Die Angabe ist optional.

Beim Animationselement, welches der Synchronisation dient, ist ansonsten ein Attribut id (oder auch xml:id in SVG tiny 1.2) mit einem Fragmentidentifizierer zu notieren. Der Wert beginnt dann optional mit dem Fragmentidentifizierer, dann folgt ein Punkt '.' und dann die Zeichenfolge 'repeat(', gefolgt von einer positiven ganzen Zahl und von ')'. Nach optionalen Leerzeichen kann dann optional ein Zeitversatz notiert werden, dessen genaue Syntax bereits beschrieben wurde.

Die ganze Zahl gibt die Anzahl der Wiederholungen an, nach denen die Synchronisation stattfinden soll. 1 bezeichnet also den Begin der ersten Wiederholung, 0 entspricht formal dem Beginn des Elementes, was aber kein Wiederholungsereignis erzeugt.

Wiederholungen beziehen sich nicht auf mehrere Einträge im Attribut begin, sondern auf Wiederholungen, die mit den noch zu besprechenden Attributen repeatDur oder repeatCount angegeben werden.

Beispiele:

<circle r="15">
<animate id="a" attributeName="stroke" values="black;white" dur="5s" repeatCount="10" />
<animateMotion dur="12s" begin="a.repeat(2); a.repeat(4)" end="a.repeat(5)"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die Wiederholung der Animation des Striches des Kreises dient der Synchronisation der Bewegung des Kreises. Die Bewegung beginnt bei der zweiten Wiederholung 10s nach Dokumentbeginn und erneut bei der vierten Wiederholung 20s nach Dokumentbeginn und endet dann mit der fünften Wiederholung 25s nach Dokumentbeginn.

<circle r="15">
<animate id="a" attributeName="stroke" values="black;white" dur="5s" repeatCount="10" />
<animateMotion dur="12s" begin="a.repeat(2)+2s; a.repeat(4)+ 2s" end="a.repeat(5) + 2s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Die gleiche Animation, nur jeweils mit einem Zeitversatz von 2s.

Kopplung von Animationen über Wiederholungsereignisse

Kopplung von Animationen über Wiederholungsereignisse
Blaue Quadrate werden entlang eines Pfades bewegt.

Für Beginn und Ende werden zum großen Teil Wiederholungswerte mit Zeitversatz verwendet. Durch eine geschlossene Schleife mit zwei Animationen wird gewährleistet, dass die Animationen immer wieder gestartet werden.

Tastaturereignis

SVG
1.1	1.7 (teilweise)	- (ab 9 teilweise mit zusätzlichen Aktivierungstasten)	4-8 (ab Version 9 nicht mehr)	-	-	-	?	?

Das Betätigen einer Taste der Tastatur dient als Synchronisation. Der Wert beginnt mit der Zeichenfolge 'accessKey(', in SVG 1.1 gefolgt von exakt einem Zeichen, gefolgt von ')', optional gefolgt von einem Zeitversatz, dessen genaue Syntax bereits beschrieben wurde. Der Zeitversatz bezieht sich auf das Tastaturereignis, nicht den Dokumentbeginn.

Das Betätigen der Taste (Ereignis im Sinne von DOM: keydown) löst das Ereignis aus. Es sind keine weiteren Tasten zu betätigen, um die Funktionalität zu aktivieren (In dem Sinne ist das Verhalte zum Beispiel von Opera bis mindestens Version 10 fehlerhaft, denn die Funktionalität muss zunächst aktiviert werden, indem die Tasten 'shift' und 'escape' gedrückt werden. Immerhin bietet Opera dann eine komplett Übersicht über alle verwendbaren Tasten, allerdings ohne Möglichkeit einer Beschreibung, was bei dem jeweiligen Tastaturereignis passiert).

Das notierte Zeichen korrespondiert mit einer Taste auf der Tastatur des Nutzers. Zum Beispiel bezeichnet 'accessKey(a)' oder 'accessKey(A)' das Betätigen der Taste mit der Aufschrift 'a' beziehungsweise 'A'.

Alternativ zu exakt einem Zeichen ist es in SVG tiny 1.2 erlaubt, ein Schlüsselwort wie 'Enter' für die Eingabetaste anzugeben oder den Unicode des Zeichens, zum Beispiel 'U+0041' für 'A'. In SVG tiny 1.2 ist eine Liste mit Schlüsselwörtern angegeben.

Beispiel:

<circle r="15">
<animateMotion dur="12s" begin="accessKey(b)" end="accessKey(e)+2s"
     values="0,300;400,0;400,300;0,300" />
</circle>

Taste 'b' startet die Animation und sofern sie noch aktiv ist, beendet die Taste 'e' die Animation zwei Sekunden, nachdem die Taste gedrückt ist.

Tastaturereignisse für Beginn und Ende

Tastaturereignisse für Beginn und Ende
Blaue Quadrate werden entlang eines Pfades bewegt.

Für Beginn und Ende werden Tastaturereignisse verwendet. Die Tasten a bis e für den Beginn, 0 bis 4 entsprechend für das Ende.

Animation mit Tastatur beginnen, Methode nach SVG tiny 1.2

Animation mit Tastatur beginnen, Methode nach SVG tiny 1.2
Die neue Notation für accessKey in SVG tiny 1.2 kann mit allen verfügbaren speziellen Tasten ausprobiert werden. Alternativ kann auch die einfache Notation von SVG 1.1 verwendet werden, hier representiert durch das erste 'a'. accessKey sollte ohne weitere Tastenkombinationen verfügbar sein, wenigstens für alles Tasten der Tastatur.

Der Effekt einer Aktivierung besteht darin, dass sich die Farbe jenes Kreises ändert, welcher links neben der Bezeichnung einer Taste steht.

Uhrzeit

SVG
1.1	1.7 (teilweise, gar nicht für end)	-	-	-	-	-	?	?

Eine Uhrzeit notiert in einer einfachen Variante des internationalen Formates für Datum und Uhrzeit dient als Synchronisation. Die jeweilige Uhrzeit wird vom Darstellungsprogramm jeweils in eine Dokumentzeit umgewandelt und dann effektiv wie ein Zeitversatz behandelt. Dieser Wert ist in SVG tiny 1.2 nicht verfügbar.

Der Wert beginnt mit der Zeichenfolge 'wallclock(', gefolgt optionalen Leerzeichen, gefolgt von einer Uhrzeitangabe, gefolgt von optionalen Leerzeichen, gefolgt von ')'.

Die Uhrzeitangabe ist entweder vom Typ 'DateTime' oder vom Typ 'WallTime' oder vom Typ 'Date'. Wird 'WallTime' verwendet, bezieht sich die Angabe auf den aktuellen Tag zum Dokumentbeginn. Wird 'Date' verwendet, bezieht sich die Angabe auf 0 Uhr des angegebenen Tages in lokaler Zeit.

Der Typ 'DateTime' setzt sich zusammen aus 'Date', gefolgt von 'T'. gefolgt von 'WallTime'.

Der Type 'Date' besteht aus exakt 4 Ziffern (jeweils 0 bis 9) für das Jahr, gefolgt von '-' gefolgt von zwei Ziffern (Bereich 01 bis 12) für den Monat, gefolgt von '-', gefolgt von zwei Ziffern für den Tag (Bereich 01 bis 31, je nach Monat ein gültiger Tag für den Monat).

'Walltime' ist die Angabe einer Zeit. Diese beginnt mit zwei Ziffern (Bereich 00 bis 23) für Stunden, gefolgt von ':', gefolgt von zwei Ziffern für Minuten (Bereich 00 bis 59).
Optional folgt dann eine weitere Zeichenfolge für Sekunden, beginnend mit ':', gefolgt von zwei Ziffern für ganze Sekunden (Bereich 00 bis 59; das Format erlaubt auch den Wert 60 im Falle der selten eintretenden Schaltsekunden, allerdings kann das bei realen Programmen und Computern Probleme nach sich ziehen, weil die oft Schaltsekunden nicht korrekt berücksichtigen können, weil diese nur tabllarisch verfügbar sind und nicht langfristig für die Zukunft festgelegt sind, nur für die Vergangenheit). Darauf folgen optional Bruchteile von Sekunden, beginnend mit '.', gefolgt von mindestens einer Ziffer (0 bis 9).

Statt des Sekundenteils oder auf diesen folgend kann eine Angabe zur Zeitzone notiert werden. Diese Zeichenfolge ist entweder ein 'Z' für eine Angabe der UTC, also der globalen Zeit, oder die Angabe einer Zeitzone. Die Angabe der Zeitzone beginnt entweder mit '+' oder '-', gefolgt von zwei Ziffern (Bereich 00 bis 23) für Stunden, gefolgt von ':', gefolgt von zwei Ziffern (Bereich 00 bis 59) für Minuten.

Fehlt die Zeitzonenangabe, so ist die Zeitzone am Präsentationsort gemeint, die lokale Zeit des Nutzers also.

Beispiele:

Digitale Uhr (lokale Zeit)

Analoge 24-Stunden-Uhr (UTC)

UTC-Jahresbeginn 2010:
begin="wallclock( 2010-01-01T00:00Z )"
begin="wallclock( 2010-01-01T00:00:00Z )"
begin="wallclock( 2010-01-01T00:00:00.0Z )"
begin="wallclock( 2010-01-01T00:00:00.0Z )"
begin="wallclock( 2010-01-01T00:00:00.0-00:00 )"

Beginn des aktuellen Tages in lokaler Zeit, zum Beispiel brauchbar für eine lokale Uhr:
begin="wallclock(00:00)"

Beginn des aktuellen Tages in globaler Zeit UTC, zum Beispiel brauchbar für eine globale Uhr:
begin="wallclock( 00:00Z)"
oder
begin="wallclock(00:00+00:00 )

Ende der Animation mittags in lokaler Zeit, wenn die Animation nur vormittags laufen soll:
end="wallclock(12:00)"

Oder mit einer anderen Zeit (UTC):
end="wallclock(2042-03-29T17:43:11.1278Z )"

Anwendungen für ein komplettes Datum könnten etwa ein Herunter- oder Heraufzählen von oder zu einem bestimmten Ereignis sein, ansonsten sind die Anwendungsmöglichkeiten von Uhrzeitwerten vermutlich eher begrenzt. Leider ist für einen Uhrzeitwert auch keine zusätzliche Angabe eines Zeitversatzes vorgesehen, was dann wiederum einige solcher Anwendungen erschwert.

Auch um etwa bei Wettkämpfen oder Glücksspielen darüber die Anwendbarkeit von interaktiven Anwendungen zu begrenzen, statt über eine server-seitige Strategie, ist nicht besonders schlau, weil SVG-Dokumente leicht mit einem Texteditor modifiziert werden können, somit können durch den Anwender also auch leicht feste Beginn- und Endzeiten verändert werden.

Digitale Uhr (lokale Zeit)

Analoge 24-Stunden-Uhr (UTC)

'indefinite'

SVG
1.1	1.7 (teilweise)	8 (teilweise)	4 (teilweise)	-	4 (teilweise)	?	?	?

Kein endlicher Wert ist festgelegt. Die Sychronisation kann durch ein externes Ereignis ausgelöst werden (DOM oder Verweis).

Ist 'indefinite' für begin angegeben und kein anderer Wert in der Liste, so beginnt die Animation nicht ohne weitere Interaktion. Der Beginnzeitpunkt der Animation ist (noch) nicht aufgelöst.

Um mit einem Verweis eine Animation beginnen zu können, unabhängig davon, ob 'indefinite' angegeben ist oder nicht, ist bei dem Animationselement ein Fragmentidentifizierer zu notieren. Wird ein Verweis auf das Animationselement betätigt, so startet die Animation. Ist für begin 'indefinite' notiert, wird der Animationsbeginn mit der Betätigung des Verweises aufgelöst und in die entsprechende Liste des Darstellungsprogrammes für Beginnzeiten eingetragen. Stehen allerdings in der Liste bereits Beginnzeiten, so wird zunächst von der aktuellen Zeit rückwärts nach einem gültigen Wert für begin gesucht. Wird einer gefunden, wird die gesamte Historie von dem Zeitpunkt an wiederholt. Gibt es keinen gültigen Wert in der Vergangenheit, so wird der erste in der Zukunft gewählt und der Zeitablauf von dort aus fortgesetzt. Gibt es keine Beginnzeitpunkt in der Liste, so wird die aktuelle Zeit als Beginnzeit eingetragen und die Animation beginnt.

end ist nicht direkt mit einem Verweis ansprechbar, allenfalls indirekt über eine Synchronisation mit einem begin, welches mit einem Verweis ausgelöst wird. Allerdings kann in der Werteliste von end ein 'indefinite' notiert werden, um sicherzustellen, dass auf jeden Fall ein Endwert vorhanden ist, der größer ist als jeder Beginnwert, so dass also für jedes begin ein gültiges Intervall für eine Animation gefunden werden kann. Das ist nicht notwendig, wenn gar kein end notiert ist.

Animation mit Verweis aktivieren

Animation mit Verweis aktivieren
Blaue Quadrate werden entlang eines Pfades bewegt.

Für die vier Animationen wird begin indefinite notiert. Diese können durch einen Verweis gestartet werden, die Verweise umgeben jeweils die Quadrate.

Interessant bei der Aktivierung einer Animation durch einen Verweis ist, dass bei einer abermaligen Aktivierung der gesamte Zeitablauf seit der letzten Aktivierung wiederholt wird, weil durch die Aktivierung der Zeitpunkt für den Beginn aufgelöst wird und bei einer erneuten Aktivierung auf die letzte aufgelöste Beginnzeit zurückgegriffen wird.

Auswertung von Beginn- und Endzeitlisten

Das Modell der Animation basiert auf Zeitintervallen, in denen die Animation stattfindet. Ein Zeitintervall ist definiert durch eine Beginnzeit und eine Endzeit, gegeben durch Werte in den Listen der Attribute begin und end. Für dasselbe Animationsziel kann es im Laufe der Zeit mehrere Intervalle geben. Zu jedem Zeitpunkt gibt es exakt ein aktuelles Intervall bezogen auf ein Animationsziel. Die Intervalle werden erzeugt durch eine Auswertung von Listen für Beginnzeiten und Endzeiten, basierend auf den Listen von begin und end.

Die Zeiten, die verwendet werden, um die Intervalle zu erzeugen, werden Instanzzeiten genannt. Einige Bedingungen, die in begin und end notiert sein können, erzeugen exakt eine Instanzzeit, wie etwa ein einfacher Zeitversatz, andere wie Ereigniswerte oder Synchronisationswerte können mehrere erzeugen.

Einige Instanzzeiten wie Zeitversätze verbleiben immer in den Listen der Beginn- oder Endzeiten, andere wie Ereigniswerte werden nur hinzugefügt, wenn das Ereignis wirklich passiert und werden wieder entfernt, wenn die Animation neu startet, sofern die zugehörigen Instanzzeiten nicht mehr zum aktuellen Zeitintervall gehören, sondern in der Vergangenheit liegen, also vor dem aktuellen Zeitintervall. Synchronisationswerte werden neu ermittelt, wenn die Animation neu startet. Eine aufgelöste Zeit resultierend aus einem eingetretenen Sychronisationsereignis wird wieder aus den Listen gelöscht, wenn sowohl die sychronisierende als auch die abhängige Animation neu startet.

Zum Dokumentbeginn wird für jedes Animationsziel versucht, ein aktuelles Intervall zu ermitteln. Wenn der Beginn aufgelöst ist, das Ende aber nicht, kann die Animation auch erneut starten, während sie noch aktiv ist, dies beendet das aktuelle Intervall mit dem Beginn des neuen aktuellen Intervalls.

Weil Beginn- und Endzeiten auf anderen Zeiten basieren können, die sich ändern mögen, ist auch das aktuelle Intervall Gegenstand einer möglichen zeitabhängigen Änderung. Insbesondere kann die Instanzzeit für das Ende des aktuellen Intervalls sich ändern. Dies wird dynamisch angepasst. Einmal eingetretene Zeiten werden allerdings nicht mehr korrigiert. Insbesondere kann die Beginnzeit sich nicht mehr ändern, wenn das aktuelle Intervall erst einmal begonnen hat. Und wenn das Intervall zu Ende ist, kann sich auch die Endzeit nicht mehr ändern.

Synchronisationswerte erzeugen eine Abhängigkeit zwischen zwei Animationszielen. Nur Beginn- und Endzeiten des aktuellen Intervalles erzeugen zeitlich veränderliche Abhängigkeiten bei abhängigen Animationszielen.

Die verschiedenen Eintragsmöglichkeiten für beginn und end werden unterschiedlich in Instanzzeiten umgewandelt:
Am einfachsten passiert dies für Zeitversätze. Aus jeden Zeitversatz ergibt sich eine Instanzzeit, die immer in der Liste verbleibt.
Synchronsationen mit einer Uhrzeit sind ähnlich einfach. Die Uhrzeit wird zu einem Zeitversatz in Dokumentzeit umgewandelt und dieser Zeitversatz erzeugt wiederum jeweils eine immer in der Liste verbleibende Instanzzeit.
Ereigniswerte, Tastaturereignisse und Wiederholungsereignisse werden alle ähnlich behandelt. Aus diesen Bedingungen ergibt sich erst eine Instanzzeit, wenn das jeweilige Ereignis wirklich eingetreten ist. Jedesmal, wenn das Ereignis eintritt, wird eine neue Instanzzeit erzeugt. Die Zeit des Ereignisses, gegebenenfalls mit dem notierten Zeitversatz, wird als Instanzzeit in der Liste notiert. Wenn das Animationsziel neu startet, wird die Zeit allerdings wieder gelöscht.
Auch Synchronisationswerte werden ähnlich behandelt. Es ergibt sich erst eine Instanzzeit, wenn die synchronisierende Animation ein aktuelles Intervall erzeugt. Daraus ergibt sich dann jeweils eine einzige Instanzzeit. Die Zeit, gegebenenfalls mit dem notierten Zeitversatz, wird als Instanzzeit in der Liste notiert. Allerdings wird die Zeit nicht notwendig gelöscht, wenn das Animationsziel neu startet. Stattdessen wird die Instanzzeit erst gelöscht, wenn die synchronisierende und die abhängige Animation neu starten. Wenn die synchronisierende Animation neu startet, wird die Instanzzeit allerdings neu berechnet.
'indefinite' erzeugt keine Instanzzeit in der Liste der Beginnzeiten. Es erzeugt allerdings eine Instanzzeit bei unendlich in der Liste der Endzeiten.

Sind bereits alle möglichen Intervalle abgearbietet, mag es kein weiteres Intervall mehr geben. Das letzte Intervall gilt solange als das aktuelle, bis ein neues beginnt. Der Sachverhalt kann sich mit jeder neu hinzugefügten Instanzzeit ändern, so dass jede Änderung eine erneute Verarbeitung der Listen vom aktuellen Zeitpunkt aus zur Folge hat, die ein neues Intervall erzeugen kann.

Die Verarbeitung einer Animation besteht im Wesentlichen aus folgenden Schritten:

1. Start - erstes Intervall finden
2. Warten, das Intervall zu beginnen
3. Aktive Zeit - Animation durchführen
4. Ende des Intervalls - das nächste berechnen und abhängige Animationen informieren
5. Nach der aktiven Zeit - gegebenenfalls eingefrorene Werte anwenden und auf das nächste Intervall warten

Die Punkte zwei bis fünf können sich wiederholen. Während des zweiten Punktes kann sich die Beginnzeit ändern, während des zweiten und dritten die Endzeit. Wenn dies passiert, wird dies an abhängige Animationen weitergereicht.

Das erste Intervall ist recht einfach zu ermitteln. Problematisch sind dabei nur Intervalle, welche komplett vor dem Dokumentbeginn liegen, wo also Beginn- und Endzeit vor dem Dokumentbeginn liegen. Diese Intervalle werden aussortiert und führen zu keiner Animation und keiner Synchronisation. Das erste akzeptable Intervall ist also jenes, welches die früheste Endzeit nach dem Dokumentbeginn aufweist.

Die Phase des Wartens, um das ein Intervall zu beginnen, tritt nur auf, wenn das aktuelle Intervall nicht sofort beginnt. Eine Änderung der Beginnzeit in dieser Phase wirkt sich auf die Bestimmung des aktuellen Intervalles aus, welches einschließlich aller Abhängigkeiten korrigiert wird.

Die aktive Zeit liegt zwischen dem Beginn und dem Ende des aktuellen Intervalles, sobald das Intervall begonnen hat. In dieser Zeit kann sich zwar die Endzeit weiterhin ändern, aber nicht mehr die Anfangszeit. Änderungen in der Liste dier Beginnzeiten ändern nicht das aktuelle Intervall, können aber zu einem erneuten Start der Animation führen, also ein neues Intervalle erzeugen und zuvor das aktuelle beenden.

Anders als beim ersten Intervall wird nach dem Ende eines Intervalles nur nach einem neuen Beginn nach dem Ende des Intervalles gesucht, nicht davor. Insbesondere kann dies bei einem zusätzlichen negativen Zeitversatz zu einem Ereignis dazu führen, für das die Instanzzeit nicht akzeptabel ist, wenn sie vor dem Ende des beendeten, aber noch aktuellen Intervalles liegt. Ein Neustart kann zwar das aktuelle Intervall beenden, da sich aber die Beginnzeit eines bereits begonnenen Intervalles nicht mehr ändert, kann das neue Intervall nicht vor dem aktuellen beginnen und wäre somit nicht akzeptabel. Das schränkt die wirksamen negative Zeitversätze für Ereignisse auf jene ein, die zu Instanzeiten führen, die nach dem Beginn des aktiven Intervalls liegen. Ist das aktuelle Intervall gar beendet, so wird auch die Endzeit nicht mehr korrigiert und es ist nur noch eine Instanzzeit als Beginn eines neuen Intervalles akzeptabel, die hinter dem Ende des aktuellen Intervalles liegt.

Nach der aktiven Zeit wird gegebenenfalls ein eingefrorener Wert angewendet und auf das nächste Intervall gewartet. Zeiten für das beendete Intervall können sich nicht mehr ändern.

Abhängigkeiten und Synchronisationen können zu zyklischen Abhängigkeiten führen, die nicht immer auflösbar sein müssen. Auflösbare gegenseitige Abhängigkeiten können sehr nützlich sein und führen zu fortschreitenden Zyklen. Kann in einer zyklischen Abhängigkeit keine Beginnzeit aufgelöst werden, so kann der Zyklus nicht fortschreiten, es findet keine Animation statt, solange keine Zeit aufgelöst wird, etwa durch einen aktivierten Verweis auf eines der beteiligten Animationselemente.

Eingefrorene Animation

SVG
1.1	1.7 (oft falsch)	9 (8 teilweise)	4	-	4 (teilweise)	?	?	?

Nach dem Ende der aktiven Dauer einer Animation springt der Wert per Voreinstellung zurück auf den darunterliegenden Wert. Mit dem Animationsattribut fill, welches auf Animationselemente anwendbar ist und nichts mit dem Präsentationsattribut fill für darstellbare Elemente zu tun hat, kann auf die Präsentation nach der aktiven Dauer Einfluss genommen werden.

Mögliche Werte des Animationsattributes fill sind:

'remove'

Nach der aktiven Dauer wird zur Voreinstellung zurückgesprungen. Die Animation beeinflusst nicht länger das Animationsziel.

'freeze'

Der Wert, welcher als letztes in der aktiven Dauer eingenommen wurde, wird beibehalten.

Wird die aktive Dauer einer Animation eingeschränkt, so endet die Animation vorzeitig mit einem Zwischenwert. Bei fill 'freeze' wird dieser Zwischenwert beibehalten.

Bei einem nicht stetigen Animationsverlauf kann es passieren, dass das Ende der aktiven Dauer gerade auf eine Unstetigkeitsstelle fällt. Weil Zeitintervalle so festgelegt sind, dass der Anfang eingeschlossen ist und das Ende nicht, ergibt sich der eingefrorene aus dem Grenzwert der Animation vor dem Ende, nicht zwangsläufig durch den Wert, der für den Endzeitpunkt notiert ist.

Eine Ausnahme ergibt sich, wenn das Ende der Animation gerade auf ein ganzzahliges Vielfaches der einfachen Animationsdauer fällt. In dem Falle wird der letzte Wert eingefroren, der in der values-Liste steht. Bei kumulativen Animationen wird entsprechend der kumulierte Endwert eingefroren.

Beispiele:

<circle r="15">
<animateMotion dur="12s" values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Der Kreis springt nicht am Ende der Animation an den Ursprung zurück, sondern bleibt bei 0,300.

<line x1="100" x2="400" y1="100" y2="400" stroke="black" stroke-width="10">
<animate attributeName="stroke-linecap" dur="6s" end="4s"
         values="square;round;butt" fill="freeze" />
</line>

Die Form der Linienenden wird animiert. Mittels end wird die Animationsdauer eingeschränkt und die Animation ist eingefroren. Das Ende der aktiven Dauer fällt auf einen Zeitpunkt, wo die Form des Linienendes gerade wechseln soll. Der eingefrorene Wert ist 'round' und nicht 'butt'.

Diskrete Animation und fill

Diskrete Animation und fill
cx und cy eines Kreises werden diskret in 10s von klein nach groß animiert. Auf cx wird eine zweite Animation nach 3s für 4s von mittel zu klein mit dem fill-Wert freeze angewendet. Dies bedeutet für die Gesamtanimation ein konstant kleines cx für die letzten 3s. Ein grauer Pfad zeigt die korrekte Trajektorie des Kreises. Wenn das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Mehrere Animationen und fill

Mehrere Animationen und fill
cx und cy eines Kreises werden 10s animiert, cx mit fill freeze und remove. Dies Beispiel testet speziell das Verhalten am Ende der einfachen Dauer bei einer noch immer aktiven Animation mit niedrigerer Priorität. Ein grauer Pfad zeigt die korrekte Trajektorie des Kreises für den ersten Umlauf. Wenn das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Sich wiederholende Animationen

Die einfache Animationsdauer einer Animation kann wiederholt werden, um den Animationseffekt mehrfach hintereinander darzustellen. Die kann mit den Attributen repeatDur oder repeatCount notiert werden. Es sollte höchstens eines der beiden Attribute angegeben werden. Werden beide angegeben, so wird das Minimum der sich daraus ergebenden aktiven Dauern angenommen.

repeatDur

SVG
1.1	1.7	8	4	-	4 (teilweise)	?	?	?

Mittels repeatDur wird die Dauer der wiederholten Animation angegeben. Der Wert ist entweder 'indefinite' oder ein Zeitwert (wie bereits für dur definiert). Bei 'indefinite' wiederholt sich die Animation permanent (bis das Dokument oder die Animation anderweitig beendet wird).

Beispiele:

<circle r="15">
<animateMotion dur="12s" repeatDur="6s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die aktive Dauer der Animation wird durch repeatDur verkürzt, weil die dafür angegebene Dauer kürzer ist als die einfache Animationsdauer. Die Bewegung des Kreises wird in der Mitte der Animation eingefroren.

<circle r="15">
<animateMotion dur="12s" repeatDur="indefinite"
   values="0,300;400,0;400,300;0,300" />
</circle>

Weil repeatDur "indefinite" angegeben ist, wiederholt sich die Animation, bis die Anzeige des Dokumentes beendet wird.

<circle r="15">
<animateMotion dur="12s" repeatDur="16s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die Animation läuft einmal komplett durch und wiederholt nochmal das erste Drittel und dann wird die Bewegung eingefroren.

Animationsattribut repeatDur

Animationsattribut repeatDur
cx einer Ellipse wird animiert von 300 nach 700 mit einer Dauer von 20s und einem repeatDur von 25.3451s.
cy einer Ellipse wird animiert von 300 nach 700 mit einer Dauer von 10s und einem repeatDur von 25.3451s.
rx einer Ellipse wird animiert from 50 nach 300 mit einer Dauer von 5s und einem repeatDur von 25.3451s.
ry einer Ellipse wird animiert from 50 nach 300 mit einer Dauer von 4s und einem repeatDur von 25.3451s.
Dies bedeutet, alle Animationen enden exakt nach 25.3451s.
Anfangs- und Endform sind zum Vergleich in grau gegeben.

repeatCount

SVG
1.1	1.7	8	4	-	4 (teilweise)	?	?	?

Mittels repeatCount wird die Anzahl der gewünschten Durchläufe angegeben. Der Wert ist entweder 'indefinite' oder eine Zahl größer als 0. Bei 'indefinite' wiederholt sich die Animation permanent (bis das Dokument oder die Animation anderweitig beendet wird). 1 entspricht also der einfachen Animationsdauer, 0.5 der halben, die aktive Animationsdauer wird also auf die Hälfte der einfachen Animationsdauer eingeschränkt. Mit 10 werden also zehn Durchläufe angegeben, was der zehnfachen einfachen Animationsdauer entspricht.

Beispiele (entsprechend zu denen von repeatCount):

<circle r="15">
<animateMotion dur="12s" repeatCount="0.5"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die aktive Dauer der Animation wird durch repeatCount verkürzt, weil die sich daraus ergebende Dauer kürzer ist als die einfache Animationsdauer. Die Bewegung des Kreises wird in der Mitte der Animation eingefroren.

<circle r="15">
<animateMotion dur="12s" repeatCount="indefinite"
   values="0,300;400,0;400,300;0,300" />
</circle>

Weil repeatCount "indefinite" angegeben ist, wiederholt sich die Animation, bis die Anzeige des Dokumentes beendet wird.

<circle r="15">
<animateMotion dur="12s" repeatCount="1.3333"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die Animation läuft einmal komplett durch und wiederholt nochmal grob das erste Drittel und dann wird die Bewegung eingefroren.

Animationsattribut repeatCount

Animationsattribut repeatCount
cx einer Ellipse wird animiert von 300 nach 700 mit einer Dauer von 20s und einem repeatCount von 1.25.
cy einer Ellipse wird animiert von 300 nach 700 mit einer Dauer von 10s und einem repeatCount von 2.5.
rx einer Ellipse wird animiert from 50 nach 300 mit einer Dauer von 5s und einem repeatCount von 5.
ry einer Ellipse wird animiert from 50 nach 300 mit einer Dauer von 4s und einem repeatCount von 6.25.
Dies bedeutet, alle Animationen enden exakt nach 25s.
Anfangs- und Endform sind zum Vergleich in grau gegeben.

Minimale und maximale aktive Dauer angeben

Mit den Attributen min und max kann die minimale, beziehungsweise maximale aktive Dauer genauer kontrolliert werden.

Die beiden Attribute geben eine untere, beziehungsweise obere Grenze der Animationsdauer an, welche effektiv andere Einschränkungen überschreiben. Sind die Attribute nicht angegeben, ergeben sich daraus jeweils keine weiteren Einschränkungen. Bei fehlerhaften Angaben wird das jeweilige Attribut mit der fehlerhaften Angabe ignoriert.

Sind beide Attribute angegeben, darf max' nicht kleiner als min sein, sonst werden beide Attribute ignoriert.

Jedesmal, wenn die aktive Dauer einer Animation neu bestimmt wird, wird dies zunächst ohne Berücksichtigung von min und max getan. Liegt das Ergebnis innerhalb der von min und max vorgegebenen Grenzen, wird das Ergebnis beibehalten.

Sonst gibt es zwei Möglichkeiten, die vorliegen können:

Ist die berechnete aktive Dauer größer als der Wert von max, so ist die aktive Dauer der Wert von max.

Ist die berechnete aktive Dauer kleiner als der Wert von min, so ist die aktive Dauer der Wert von min.
Falls die einfache Amimationsdauer oder die Dauer der Animation bedingt durch Wiederholungen größer als min ist, so erfolgt die Präsentation über die durch min' eingeschränkte Dauer ganz normal.
Sonst erfolgt die Präsentation samt gegebenenfalls eingefrorenem Wert wie ohne Angabe von min. Das Ende der aktiven Dauer ist jedoch trotzdem durch min gegeben und wird dann gegebenenfalls als Synchronisationswert verwendet, nicht das sichtbare Ende der Präsentation.

Interaktives Beispiel zum Ausprobieren

Interaktives Beispiel zum Ausprobieren
Die Höhe eines Rechtecks kann mit einem Klick auf den Startknopf vergrößert werden, was mit einem Klick auf den Stopknopf abgebrochen werden kann. Es startet 1s nach dem Klick auf den Startknopf. Die Dauer ist 40s, min ist 20s, max ist 30s, die mit diesen Zeiten verknüpften Größen sind grau markiert.

Dies bedeutet:
1. Die Animation kann mit einem Klick auf den Startknopf gestartet werden, auch wiederholt, weil dies vom Dokument nicht verhindert wird.
2. Falls die Animation gestartet wird und nicht vor ihrem Ende neue gestartet wird, so endet sie irgendwo zwischen den Werten für min und max.
3. Falls der Stopknopf nach Erreichen des Wertes für max oder nie betätigt wird, wurde die Animation bereits bei max angehalten und nichts weiter passiert.
4. Falls der Stopknopf zwischen min und max betätigt wird, hält die Animation unmittelbar an.
5. Falls der Stopknopf vor Erreichen des Wertes für min betätigt wird, dauert die Animation an und wird erst beim Wert für min angehalten.

min

SVG
1.1	1.7 (teilweise)	9.5 (ab 9 teilweise)	-	-	4 (teilweise)	?	?	?

Mit min wird die minimale aktive Dauer einer Animation angegeben. Der Wert ist entweder 'media' oder ein Zeitwert, wie bereits für dur definiert. 'media' ist nicht relevant für Animationselemente, nur für Elemente, die eine intrinsische Dauer haben (zum Beispiel audio und video in SVG tiny 1.2). Dann richtet sich die angegebene Dauer nach der intrinsischen Dauer des Mediums. Sofern 'media' für ein Animationselement angegeben ist, wird das Attribut ignoriert.

min kann zum Beispiel Einschränkungen durch end wieder aufheben. Oft ergibt sich aber nur ein wahrnehmbarer Effekt, wenn das Ende der Animation als Sychronisationswert verwendet wird.

Bei negativen Beginnzeiten erfolgt der Vergleich vom notierten Beginn, nicht vom beobachteten. Das kann dazu führen, dass eine Animation gar nicht beginnt, wenn das Intervall der korrigierten aktive Dauer vor dem Dokumentbeginn liegt.

Beispiele:

<circle r="15">
<animateMotion id="a" dur="12s" begin="4s" min="20s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
<animateMotion dur="12s" begin="a.end"
   values="400,300;0,300;400,0;400,300" fill="freeze" />
</circle>

Die aktive Dauer der ersten Animation wird von 12s auf 20s verlängert, nicht die einfache Animationsdauer. Die Bewegung wird nach der einfachen Animationsdauer eingefroren, die Animation bleibt aber aktiv. Das Ende bei 24s wird als Synchronisationswert für die zweite Animation verwendet.

<circle r="15">
<animateMotion
   dur="12s" repeatDur="indefinite"
   begin="4s" end="activate;click"
   min="20s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die Animation kann durch Aktivierung oder durch Anklickern beendet werden. Da die aktive Dauer auf mindestens 20s festgelegt ist, verzögert sich das Ende allerdings entsprechend.

Animationsattribut min

Animationsattribut min
Einfache Animation für cx und cy eines Kreises mit dur-, end- und min-Attributen. Der graue Pfad gibt die richtige Trajektorie vor. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

max

SVG
1.1	1.7 (teilweise)	9.5 (ab 9 teilweise)	4 (teilweise)	-	4 (teilweise)	?	?	?

Mit max wird die maximale aktive Dauer einer Animation angegeben. Der Wert ist entweder 'media' oder ein Zeitwert, wie bereits für dur definiert. 'media' ist nicht relevant für Animationselemente, nur für Elemente, die eine intrinsische Dauer haben (zum Beispiel audio und video in SVG tiny 1.2). Dann richtet sich die angegebene Dauer nach der intrinsischen Dauer des Mediums. Sofern 'media' für ein Animationselement angegeben ist, wird das Attribut ignoriert.

max schränkt die aktive Dauer einer Animation ein, sofern sie länger als die angegeben Dauer ist und überschreibt damit gegebenenfalls andere Angaben.

Beispiele:

<circle r="15">
<animateMotion id="a" dur="12s" begin="4s" end="14s" max="6s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
<animateMotion dur="12s" begin="a.end"
   values="400,300;0,300;400,0;400,300" fill="freeze" />
</circle>

Die aktive Dauer der ersten Animation wird von 12s auf 6s verkürzt, nicht die einfache Animationsdauer. Die Bewegung wird nach der verkürzten Dauer eingefroren. Das Ende bei 10s wird als Synchronisationswert für die zweite Animation verwendet.

<circle r="15">
<animateMotion
   dur="12s" repeatDur="indefinite"
   begin="4s" end="activate;click"
   max="3600s"
   values="0,300;400,0;400,300;0,300" fill="freeze" />
</circle>

Die Animation kann durch Aktivierung oder durch Anklickern beendet werden. Da die aktive Dauer auf maximal eine Stunde festgelegt ist, wird die Animation spätestens dann beendet und eingefroren.

Animationsattribut max

Animationsattribut max
Einfache Animation mit from und to für cx und cy eines Kreises werden mit max-Attributen gestoppt (überschreibt dur und 'syncbase'-Werte für end). Der graue Pfad gibt die richtige Trajektorie vor. Falls das rote Zentrum des Kreis sichtbar wird, ist ein Fehler aufgetreten.

Bestimmung der aktiven Dauer der Animation

Die aktive Dauer der Animation definiert das gesamte Intervall, in der die jeweilige Animation einschließlich Wiederholungen und Korrekturen aktiv ist. Sowohl die durch dur festgelegte einfache Animationsdauer, als auch end, repeatDur, repeatCount, min und max haben Einfluss auf die aktive Dauer.

SMIL folgend sei im Weiteren B der Beginn der Animation, d die aktive Animationsdauer, PAD die vorläufige aktive Dauer der Animation, bevor min und max ausgewertet werden, IAD das Ergebnis einer Zwischenrechnung und AD die aktive Dauer der Animation.

Die Bestimmung der aktiven Dauer basiert auf den Informationen, die zu der Zeit verfügbar sind, wenn die Berechnung gemacht wird. Änderungen, Ereignisse, Synchronisationen können jederzeit eine erneute Berechnung erfordern.

Wenn end angegeben ist, aber weder dur, repeatDur und repeatCount, dann ist die einfache Animationsdauer unendlich, die aktive Dauer wird bestimmt durch den Endwert.
Wenn end ein aufgelöster (endlicher) Wert ist, dann ist PAD = end - B.
Sonst, falls end 'indefinite' (unendlich) ist, dann ist PAD = 'indefinite'.
Sonst, falls end nicht aufgelöst ist, ist auch PAD nicht aufgelöst und muss erneut berechnet werden, wenn mehr Informationen verfügbar sind.

Wenn end nicht angegeben ist oder 'indefinite' ist, dann wird IAD aus der Zwischenrechnung benötigt, dann ist
PAD = IAD
mit folgender Zwischenrechnung:
Für diese seien drei Größen eingeführt, um die zwischenzeitliche aktive Dauer IAD zu bestimmen, die in der vorherigen Betrachtung gebraucht wird.
p0 ist die einfache Animationsdauer.
Wenn repeatCount nicht angegeben ist, bekommt p1 den Wert 'indefinite'. Sonst ist p1 die kumulierte Summe der angegebenen Zahl von Wiederholungen der einfachen Dauer. p1 ist nicht aufgelöst, bis die einfache Dauer (einer jeden Wiederholung) aufgelöst ist. Teilweise Wiederholungen tragen entsprechend anteilig der einfachen Dauer zur Summe bei.
p2 ist der Wert von repeatDur. Ist dies nicht angegeben, so ist p2 'indefinite'.
Wenn p0 gleich 0 ist, so ist auch IAD gleich 0.
Falls sonst repeatCount und repeatDur nicht angegeben sind, gilt IAD = p0.
Sonst ist IAD das Minimum von p1, p2 und 'indefinite'.

Liegt hingegen ein anderer Wert für end als 'indefinite' vor mit wenigstens einer Angabe zu dur, repeatDur oder repeatCount, so ist PAD das Minimum von IAD und der Dauer end - B :

Schließlich ergibt sich die berechnete aktive Dauer AD, indem min und max angewendet werden auf PAD. Ein fehlender Wert für min kann als 0 angenommen werden, ein fehlender für max unendlich ('indefinite'):
AD ist das Minimum von max und dem Maximum von min und PAD.

Kontrolle des Neustarts von Animationen

SVG
1.1	1.7 (teilweise)	9 (teilweise)	4 (teilweise)	-	4 (teilweise)	?	?	?

Es gibt mehrere Möglichkeiten, eine Animation erneut zu starten. Ob tatsächlich ein Neustart erfolgt, wird bestimmt durch das Attribut restart.

Eine Möglichkeit, einen Neustart zu notieren ist, mehrere Beginnzeiten in der Liste des Attribute begin anzugeben. Sind in begin Ereigniswerte angegeben oder Synchronisationswerte, kann dies ebenfalls mehrere Neustarts bewirken, wenn die Ereignisse oder Synchronisationen mehrmals zutreffen. Ferner kann mit einem Verweis (oder einem Zugriff über das Dokument-Objekt-Modell) ein Neustart veranlasst werden.

Mögliche Werte von restart sind:

always

Die Animation kann jederzeit erneut gestartet werden

whenNotActive

Die Animation kann nur erneut gestartet werden, wenn sie nicht aktiv ist, zum Beispiel nach dem Ende der aktiven Dauer. Versuche, die Animation während der aktiven Dauer erneut zu starten, werden ignoriert.

never

Die Animation kann nicht innerhalb der Dokumentzeit erneut gestartet werden, wenn die Animation bereits einmal gestartet worden ist. Es müsste also das komplette Dokument erneut gestartet werden.

Sofern nicht notiert, wird 'always' angenommen.

Wenn eine Animation erneut startet, hängt das Verhalten nicht von früheren Starts ab, einschließlich des Verhaltens von fill.

Wird eine aktive Animation erneut gestartet, so wird zunächst die aktive Dauer beendet, dann erfolgt der Neustart. Das Ende erzeugt ein Endereignis, welches zur Synchronisation an abhängige Animationen weitergegeben wird. Weil ein erneuter Start allenfalls durchgeführt wird, nachdem die aktive Dauer berechnet wurde, hat dies keinen Einfluss auf die Anwendung des Attributes min.

Beispiele:

<circle r="15">
<animateMotion dur="12s" begin="activate;click"
  values="0,300;400,0;400,300;0,300"
  restart="whenNotActive" />
</circle>

Die Animation wird durch aktivieren oder klickern des Kreises gestartet. Sie kann nur erneut gestartet werden, wenn sie nicht mehr aktiv ist.

<circle r="15">
<animateMotion dur="12s" begin="activate;click;60s"
  values="0,300;400,0;400,300;0,300"
  restart="never" />
</circle>

Die Animation wird durch aktivieren oder klickern des Kreises gestartet oder automatisch nach 60s. Sie kann nicht erneut gestartet werden.

<circle r="15">
<animateMotion dur="12s" begin="activate;click"
  values="0,300;400,0;400,300;0,300"
  restart="always" />
</circle>

Die Animation wird durch aktivieren oder klickern des Kreises gestartet. Sie kann jederzeit erneut gestartet werden.

<circle r="15">
<animateMotion dur="12s" repeatDur="indefinite"
  begin="activate;click" end="activate;click"
  values="0,300;400,0;400,300;0,300"
  restart="whenNotActive" />
</circle>

Die sich wiederholende Animation kann durch aktivieren oder klickern des Kreises gestartet werden. Ist sie aktiv, kann sie durch erneutes aktivieren oder klickern beendet werden. Dies trifft zu, weil für restart 'whenNotActive' notiert ist und das Ende nicht vor dem Beginn eintreten kann. Wäre 'always' notiert, täte ein erneutes aktivieren oder klickern die Animation zwar auch beenden, gleichzeitig aber auch neu starten, was so nicht möglich ist. Wäre 'never' notiert, so könnte die Animation zwar genau einmal gestartet und einmal beendet werden, aber nicht mehrfach.

Interaktiver restart und end

Interaktiver restart und end
Das Dokument beinhaltet sechs Subtests mit verschiedenem Verhalten. Sie haben cyane Bereiche, um die Animation einer Polylinie zu versuchen zu aktivieren (activate oder mouseup). Die oberen Subtests haben auch rote Bereiche um die Animation zu versuchen zu stoppen (activate oder mouseup). Alle Animationen haben end-Attribute mit dem Wert 60s, daher kann nach 60s keine Animation mehr gestartet oder neu gestartet werden. Dies wird mit einer Änderung der Bereiche auf grau gekennzeichnet. Die dur-Werte für die Animationen sind 5s, repeatDur is 10s. Die Tests rechts können immer neu gestartet werden, in der Mitte whenNotActive, rechts nie.

Zu testendes Verhalten:
Oben links: Innerhalb von 60s immer neustartbar, stop hat einen sichtbaren Effekt, wenn die Animation aktiv ist.
Unten links: Innerhalb von 60s immer neustartbar.
Oben mitte: Neustartbar whenNotActive und innerhalb von 60s, stop hat einen sichtbaren Effekt, wenn die Animation aktiv ist.
Unten mitte: Neustartbar whenNotActive und innerhalb von 60s.
Oben rechts: Nie neustartbar oder kein Start nach 60s, stop hat einen sichtbaren Effekt, wenn die Animation aktiv ist.
Unten rechts: Nie neustartbar oder kein Start nach 60s.

begin und end mit einem Klick

begin und end mit einem Klick
Mit einem Klick auf den Kreis wird dessen Animation gestartet. Mit einem weiteren Klick wird sie gestoppt. Dies funktioniert, weil restart auf never für den magenta Kreis gesetzt ist und whenNotActive für den hellblauen.

Additive und kumulative Animation

Eine Animation kann zu einem darunterliegenden Wert addiert werden (sofern Addition für das Animationsziel eine definierte und erlaubte Operation ist). Die Reihenfolge des Vorgehens ist dabei so, dass die einfache Animationsfunktion unabhängig vom darunterliegenden Wert bestimmt wird. Anschließend werden beide Werte zur Animationseffektfunktion aufaddiert.

Sich wiederholende Animationen können ferner kumulativ sein (sofern Addition für das Animationsziel eine definierte und erlaubte Operation ist). In dem Falle werden die einzelnen Durchläufe der Wiederholung zu einem Animationseffekt aufaddiert. Die Wiederholung ist zu unterscheiden von einem erneuten Start der Animation, der niemals kumulativ ist, also nicht auf früheren Durchläufen basieren kann.

Kumulierende Animationen sind nicht zwangsläufig additive Animationen und umgedreht, daher gibt es zwei Attribute, die das Verhalten unabhängig voneinander bestimmen.

Jedes Attribut und jede Eigenschaft ist in SVG definiert als entweder additiv oder nicht-additiv. Gemeint ist damit nicht, was der Autor für die Animation angibt, sondern was in der Spezifikation steht, ob eine additive Operation prinzipiell definiert ist.
Bei nicht-additiven wird also bei einer Animation das Attribut additive ignoriert. Bei additiven kann das Attribut additive verwendet werden, um festzulegen, ob die Animation additiv sein soll oder nicht.

In SVG ist die Frage, ob eine Animation auch kumulativ sein kann, daran gekoppelt, ob das zu animierende Attribut oder die Eigenschaft additiv ist oder nicht. Wenn nicht, wird auch das Attribut accumulate entsprechend ignoriert.

Ob in SVG Attribute oder Eigenschaften additiv sind oder nicht, hängt im Wesentlichen davon ab, zu welchem Datentyp sie gehören.

Winkel, Farben, Koordinaten, einzelne Zahlen, einzelne Längen, Prozentwerte, Transformationen sind additiv. Nicht additiv sind Frequenzangaben, Listen von Werten, Zeitangaben, URIs und alle anderen Datentypen.
Weil in SVG tiny 1.2 einige Datentypen geändert wurden, kann das zu einigen wenigen Änderungen hinsichtlich der Additivität führen. Zum Beispiel sind in SVG 1.1 für text und Verwandte die Attribute x, y etc als gegebenenfalls mehrere Koordinaten aufgeführt (oder bei rotate mehrere Winkel). In SVG tiny 1.2 werden diese Attribute jedoch als Listen geführt. Daraus kann abgeleitet werden, dass diese Attribute in SVG 1.1 noch additiv sein können, in SVG tiny 1.2 nicht mehr. Weil eine korrekte Implementierung des additiven Verhaltens mit jeweils einer beliebigen Anzahl von Koordinaten oder Winkeln aber ohnehin nicht trivial ist, ist es für Autoren sicherer, bei solch komplexen Attributen von einer additiven Animation auch in SVG 1.1 abzusehen, wenn ein einheitliches Verhalten erzielt werden soll.

Problematisch sind die etwas überfrachteten Eigenschaften fill und stroke, weil diese auch Werte haben können, für die es keine additive Operation gibt, wie etwa Maldienste oder der Wert 'none'. Prinzipiell sind die Attribute additiv, solange die Werte und sofern relevant der darunterliegende Wert einen Farbwert repräsentieren. Für Farbwerte ist eine additive Operation definiert, für Maldienste oder 'none' nicht. Wegen dieser Komplikation müsste ein Darstellungsprogramm prinzipiell untersuchen, ob eine additive Animation durchführbar ist oder nicht und dann entscheiden, ob die Angabe von additive oder accumulate ignoriert werden muss oder nicht. Die Antwort auf diese Frage kann bei komplexeren Animation mit Nutzerinteraktion zeitabhängig und schwierig zu finden sein. In der Praxis sind folglich die meisten Darstellungsprogramme mit einer Analyse und einer korrekten Schlussfolgerung vor Beginn der aktiven Dauer überfordert. Ist ein Autor daran interessiert, ein einheitliches Verhalten zu bewirken, so ist dringend zu empfehlen, Animationen von fill oder stroke nicht als additiv oder kumulativ zu kennzeichnen, wenn dies unter gewissen Umständen nicht über die ganze aktive Dauer der Animation durchführbar ist.
Wird dies nicht beachtet, kann ein undefiniertes, teils sicherlich auch fehlerhaftes Verhalten in den meisten Darstellungsprogrammen beobachtet werden, zum Beispiel könnten nicht additive Werte prinzipiell als schwarz interpretiert werden oder das Programm ignoriert additive oder accumulate erst und vielleicht auch nur so lange, wie die Werte nicht addierbar sind.

accumulate

SVG
1.1	1.7 (meist falsch)	10 (ab 8 teilweise)	4	-	4 (meist falsch)	?	?	?

Mit dem Attribut accumulate wird angegeben, ob eine Animation kumulativ sein soll oder nicht. Kumulativ heißt, dass Wiederholungen bedingt durch repeatDur oder repeatCount aufaddiert werden.

Mögliche Werte sind:

sum

Die Animation ist kumulativ. Wiederholungen werden aufeinander aufaddiert.

none

Die Animation ist nicht kumulativ und die einfache Animationsfunktion wird lediglich wiederholt.

'none' wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut wird ignoriert, falls das Animationsziel keine additive Animation erlaubt (in SVG; in SMIL, wenn es keine additive Operation erlaubt) oder die Animation sich nicht wiederholt.

Beim ersten Durchlauf ist die einfache Animationsfunktion f₀(t) unbeeinflusst von kumultiven Effekten.
Also f₀(t) = f(t).

Ist die Animation nicht kumulativ, so gilt für den i-ten Durchlauf (mit i einer positiven ganzen Zahl den Durchlauf angebend):
f_i(t) = f(t - (i*d))

Ist die Animation kumulativ, dann gilt:
f_i(t) = (f(d) * i) + f(t - (i*d))

Die kumlative Animationsfunktion ist dann
f_c(t) = f_i(t), wobei i = floor(t/d)
(wobei floor eine Operation ist, die zur nächstkleineren ganzen Zahl abrundet).

Wird der erste Wert der values-Liste als 0 gewählt, so gibt es keine Sprünge bei der Wiederholung einer kumulativen Animation. Wird der letzte Wert 0 gewählt, entspricht dies wieder einer nicht kumulativen Animation. 0 ist in dem Sinne als das neutrale Element der Addition zu verstehen, wie es für den Wert des Animationszieles definiert ist. Bei Farben ist das zum Beispiel schwarz oder #000. Bei Skalaren (einfachen Zahlen, optional auch mit Einheiten) ist es die 0, bei Vektoren der 0-Vektor, bei einer Liste von Zahlen der Eintrag 0 für jeden Wert der Liste.

Transformationen, welche mit animateTransform animiert werden können, stellen sich zwar intern als Matrixmultiplikationen dar. Entscheidend ist hier aber, was als zu animierender Wert notiert ist und das sind Zahlen oder Listen von Zahlen, folglich ist die additive Operation die von Zahlen, nicht die Multiplikation von Matrizen. Die Matrixmultiplikation gibt hingegen nur an, wie letztlich die Animationseffektfunktion zur Präsentation gebracht wird, nicht wie sie berechnet wird.

Beispiele:

<circle r="15">
<animate attributeName="cx" dur="10s" repeatDur="40s"
accumulate="sum"
values="0;100;500;200;300;100" />
</circle>

Die einzelnen Durchläufe der Wiederholung kumulieren, bei 10s beginnt der neue Durchlauf also mit 100, nicht mit 0. Effektiv sind die Werte dann 100;200;600;300;400;200. Beim nächsten Durchlauf entsprechend 200;300;700;400;500;300.

<circle r="15">
<animate attributeName="cx" dur="10s" repeatDur="40s"
accumulate="none"
values="0;100;500;200;300;100" />
</circle>

Die einzelnen Durchläufe der Wiederholung kumulieren nicht, bei 10s beginnt der neue Durchlauf also wieder mit 0.

kumulative animateMotion

Analoguhr

kumulative animateMotion
Kreise werden entlang von Quadraten gegeben mit values, repeatDur und accumulate mit einer Dauer von 30s und Wiederholung bewegt. Auch sind verschiedene Werte für das Attribut rotate gegeben, was keinen sichtbare Effekt hat, weil zentrierte Kreise bewegt werden. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Auch folgende Uhr profitiert vom kumulativen Verhalten, weil so nur jeweils für den Sprung einer Sekunde, einer Minute und einer Stunde die entsprechenden Werte von values, keyTimes und keySplines angegeben werden müsssen und nicht für ganze Listen von Sekunden, Minuten und Stunden: Analoguhr

additive

SVG
1.1	1.7 (größtenteils)	9.5 (ab 8 teilweise)	4	-	-	?	?	?

Mit dem Attribut additive wird angegeben, ob eine Animation additiv sein soll oder nicht.

Mögliche Werte sind:

sum

Die Animation ist additiv und wird zum darunterliegenden Wert addiert (einschließlich der möglichen Animationen mit niedrigerer Priorität).

replace

Die Animation ist nicht additiv und überschreibt den darunterliegenden Wert.

'replace' wird angenommen, wenn das Attribut nicht angegeben ist. Das Attribut wird ignoriert, falls das Animationsziel keine additive Animation erlaubt.

Ist f_f(t) die einfache Animationsfunktion zusammen mit Wiederholungen und dem eingeforenen Wert am Ende der Animation, so ergibt sich die Animationseffektfunktion als:

F(t,u) = u + f_f(t), wenn die Animation additiv ist,
und
F(t,u) = f_f(t). wenn nicht.

Beispiele:

<circle r="15" cx="100">
<animate attributeName="cx" dur="10s" repeatDur="40s"
additive="sum"
values="0;100;500;200;300;100" />
</circle>

Diese additive Animation hat also effektiv die Präsentationswerte 100;200;600;300;400;200 bei jedem Durchlauf.

<circle r="15" cx="100">
<animate attributeName="cx" dur="10s" repeatDur="20s"
values="400;-100" fill="freeze" />
<animate attributeName="cx" dur="10s" repeatDur="40s"
additive="sum" fill="freeze"
values="0;100;500;200;300;100" />
</circle>

Die erste Animation ist nicht additiv und überschreibt den darunterliegenden Wert von cx von 100 mit der Animation. Die zweite Animation ist additiv und zu jedem Zeitpunkt wird der darunterliegende Wert der anderen Animation hinzuaddiert. Die Animation beginnt also mit dem Wert 400 und endet mit 0.

<circle r="15" cx="100">
<animate attributeName="cx" dur="10s" repeatDur="20s"
values="400;-100" fill="freeze"
accumulate="sum" />
<animate attributeName="cx" dur="10s" repeatDur="40s"
additive="sum" fill="freeze"
values="0;100;500;200;300;100" />
</circle>

Anders als beim vorherigen Beispiel kumuliert hier die erste Animation, die Animation beginnt also wieder mit 400, endet aber letztlich mit -100.

Additive und kumulative Animationen

Farbkanäle unabhängig voneinander animieren

Additive animateMotion

Additive und kumulative Animationen
Vergleich von from-to, from-by und by animate mit values animate.

Die from-to-, from-by- und by-Animationen angewendet auf die Attribute x, y, width und height der blauen Rechtecke werden mit den entsprechenden values-Animationen einschließlich additivem und kumulativem Verhalten für das unterliegende rote Rechteck verglichen. Ein zusätzliches dunkelrotes Rechteck simuliert das gleiche Verhalten, wobei immer additive 'replace' und accumulate 'none' verwendet wird. Die blauen Rechtecke verdecken alle roten Rechtecke. Daher ist ein Fehler aufgetreten, wenn etwas Rotes sichtbar wird.

Farbkanäle unabhängig voneinander animieren
Die drei Kanäle rgb werden im großen Rechteck unabhängig voneinander animiert. In den kleinen Rechtecken sind die gleichen Animationen einzeln zu sehen.

Additive animateMotion
Ein Kreis wird entlang einiger Pfade mit einer Dauer von 10s entlang bewegt, wobei additive animateMotion verwendet wird. Die Superposition ergibt keine Animation. Der Kreis ist immer an der gleichen Stelle positioniert. Die Farbe des Kreises ändert sich von blau nach grau, nachdem die Animation beendet ist. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Kontrolle des Zeitablaufes

SVG
1.1	1.7	8	4	-	4 (größtenteils)	?	?	?

Mit dem Attribut keyTimes kann eine Liste mit Zeiten als Anteil der einfachen Animationsdauer angegeben werden, wann die in der values-Liste angebenen Werte angenommen werden sollen. Falls das Attribut angegeben ist, muss es exakt so viele Werte enthalten wie die values-Liste. Die Werte korrespondieren in der angegebenen Reihenfolge.

Jeder Wert der keyTimes-Liste ist eine Zahl zwischen 0 und 1. Die Werte in der Liste müssen monoton steigend notiert sein, der erste Wert muss 0 sein. Die Werte stellen einen Zeitversatz relativ zum Beginn der einfachen Animationsdauer dar in Einheiten der einfachen Animationsdauer.

Die Bedeutung und Notation hängt von der noch zu diskutierenden Interpolationsart (Attribut calcMode) ab:
Bei einer gleichmäßigen Animation (englisch: paced) wird das Attribut keyTimes ignoriert und diese Liste automatisch entsprechend der Abstände zwischen den values-Listenwerten berechnet.
Bei einer diskreten Animation gibt der keyTimes-Listenwert an, wann zum entsprechenden values-Listenwert gesprungen wird.
Sonst muss der letzte Wert 1 sein und die Interpolation erfolgt jeweils so, dass der zum keyTimes-Listenwert gehörige values-Listenwert jeweils exakt zum angegebenen Zeitpunkt angenommen wird. In der Zeit dazwischen wird gemäß der Interpolationsmethode interpoliert, welche gemäß calcMode angegeben oder impliziert ist.

Ist keyTimes nicht angegeben, so wird die einfache Animationsdauer entsprechend der Anzahl der values-Listenwerte in gleichlange Intervalle unterteilt. Bei einer diskreten Animation mit n Werten 1 bis n entspricht das also einer keyTimes-Liste mit den Werten (i-1)/n mit i von 1 bis n. Bei einer kontinuierlichen Animation mit n größer als 1 entsprechend (i-1)/(n-1). Eine entsprechende Liste wird dann gegebenenfalls impliziert.

Zu beachten ist, dass bei einer diskreten Animation der values-Listenwert zum keyTimes-Listenwert 1 nicht unbedingt sichtbar wird, insbesondere wenn die Animation nicht eingefroren ist und nicht kumulativ ist.

Wenn die einfache Animationsdauer unendlich ('indefinite') ist, wird das Attribut keyTimes ignoriert.

Gibt es Fehler in der Notation, so wird die Anzeige des Dokumentes bei SVG 1.1 abgebrochen. Bei SVG tiny 1.2 wird legiglich das Attribut ignoriert.

Beispiele:

<line x1="100" x2="400" y1="100" y2="400" stroke="black" stroke-width="10">
<animate attributeName="stroke-linecap" dur="30s"
         values="square;round;butt" fill="freeze"
         keyTimes="0;0.2;1" />
</line>

Die Animation von stroke-linecap ist immer diskret, was an den möglichen Werten liegt, die nicht interpolierbar sind. Zu Beginn ist stroke-linecap 'square', 0.2 * 30s = 6s springt es nach 'round'. Nach 30s wird der die Animation mit dem Endwert 'butt' eingefroren.

<line x1="100" x2="400" y1="100" y2="400" stroke="black" stroke-width="10">
<animate attributeName="stroke-linecap" dur="30s" repeatDur="60s"
         values="square;round;butt" fill="freeze"
         keyTimes="0;0.2;1" />
</line>

Die gleiche Animation wie zuvor, nur jetzt mit Wiederholung. Sie beginnt wieder mit 'square', springt nach 6s auf 'round'. Nach 30s setzt die Wiederholung ein, der Wert springt wieder auf 'square', nach 36s auf 'round' und wird nach 60s mit dem Endwert 'butt' eingefroren.

<circle r="15" cx="100">
<animate attributeName="cx" dur="50s"
values="0;100;500;200;300;100"
keyTimes="0;0.4;0.5;0.7;0.9;1" />
</circle>

cx eines Kreises wird kontinuierlich animiert. Entsprechend der keyTimes erfolgt die Zeiteinteilung. Die cx beginnt mit 0 und ändert sich kontinuierlich innerhalb von 20s nach 100, dann ändert sich der Wert nach 500 innerhalb von weiteren 5s, weiter nach 200 innerhalb von 10s, dann nach 300 in weiteren 10s und weiter zum Endwert 100 nach der einfachen Animationsdauer von 50s.

<circle r="15" cx="100">
<animate attributeName="cx" dur="50s"
values="0;500;400;200"
keyTimes="0;0.5;0.5;1" />
</circle>

Ähnliches Beispiel wie zuvor. Nur mit weniger Werten. Zudem wird hier nach der halben einfachen Animationsdauer in der ansonsten kontinuierlichen Animation ein diskreter Sprung hervorgerufen, weil zweimal dieselbe Wert in der keyTimes-Liste notiert ist. Dies ist erlaubt, nur nicht die Angabe kleinerer Werte. Die Interpolation erfolgt also in den ersten 25s von 0 nach 500, in den zweiten 25s von 400 nach 200.

<circle r="15" cx="100">
<animate attributeName="cx" dur="50s"
values="0;500;400;200" fill="freeze"
keyTimes="0;0.5;1;1" />
</circle>

Ähnliches Beispiel wie zuvor. Nur wird hier zweimal der keyTimes-Listenwert 1 verwendet, um zu bewirken, dass der eingefrorene Wert (200) ein anderer ist als der letzte Wert, der sich aus der kontinuierlichen Animation ergibt (400).

Bewegung eines Doppelsternensystems

Anwendungsbeispiele aus dem Bereich der klassischen Physik:
Bewegung eines Doppelsternensystems
Zwei Sterne bewegen sich um ihren gemeinsamen Schwerpunkt.

Das Problem ist in der Physik bekannt als Zweikörperproblem und kann zum Beispiel für das bei einem Doppelsternensystem vorliegende Gravitationspotential analytisch gelöst werden (klassische Näherung). Von der Lösung wird die Liste für values bestimmt und die für keyTimes. Bei der analytischen Lösung ist sowohl der Ort als auch die Zeit als Funktion eines Laufparameters gegeben, daher ist die Verwendung solcher Listen ideal, anders als eine explizite Zeitabhängigkeit des Ortes zu bestimmen.

Statt mit einer values-Liste ginge es noch genauer mit einer Bewegung entlang eines Pfades und einer zusätzlichen kubischen Interpolation der Bewegung, das ist allerdings deutlich arbeitsaufwendiger und ist für den visuellen Effekt nicht notwendig.

Beim Doppelsternensystem handelt es sich um einen gebundenen Zustand im Gravitationspotential, genauso sieht die klassische Lösung für das Coulombpotential für Teilchen mit entgegengesetzter Ladung aus. In der Praxis gibt es allerdings kaum so große geladene Objekte, dass die klassische Näherung, also ohne Berücksichtigung von Strahlung und Quantenphysik besonders hilfreich wäre. Anders ist das bei nicht gebundenen Zuständen, das sind dann Streulösungen. Weil die Gravitation immer attraktiv ist, tritt da nur eine Möglichkeit auf, beim Coulombpotential können auch gleiche Ladungen vorliegen, dann ist das Potential repulsiv und es gibt nur die Streulösung und keinen gebundenen Zustand.

Streuung im attraktiven Potential

Streuung im attraktiven Potential
Bewegung zweier Teilchen im attraktiven Coulombpotential oder im Gravitationspotential - klassische Näherung ohne Strahlung.

Streuung im repulsiven Potential

Streuung im repulsiven Potential
Bewegung zweier Teilchen im repulsiven Coulombpotential - klassische Näherung ohne Strahlung.

Bei anderen Potentialen gibt es oft keine analytische Lösung und solche Probleme werden dann oft numerisch gelöst, sind dann aber für die Animation auch nur für eine endliche Zeit berechenbar. Je nach Art der Rechnung kann das Ergebnis auch wieder eine explizite Zeitabhängigkeit des Ortes sein, so dass die Verwendung von keyTimes nicht notwendig ist. keyTimes sind also insbesondere dann hilfreich, wenn die Orte der Bewegung zu bestimmten Zeitpunkten bekannt sind, aber die Bewegung nicht gleichmäßig ist. Dies kann etwa auch hilfreich sein, wenn sich ein Objekt über längere Zeit gleichmäßig bewegt, also nur zwei Punkte in der Ebene notwendig sind, um die Bewegung zu beschreiben, sich dann aber in kurzer Zeit die Bewegungsrichtung ändert, wo also viele Punkte benötigt werden, um die Bewegung gut zu beschreiben und sich auch der Betrag der Geschwindigkeit gegebenenfalls drastisch ändert. Dies ist bei den meisten Streuproblemen der Fall, zum Beispiel auch bei Stößen von Atomen oder Molekülen, die sich meist mit konstanter Geschwindigkeit bewegen und nur wenn sie sich sehr nahekommen eine Ablenkung, also eine Änderung der Geschwindigkeit, stattfindet. Die Atome und Moleküle sind elektrisch neutral und haben daher nur kurzreichweitige Potentiale, anders als bei obigen Beispielen mit dem Colombpotential, welche hilfreich sein können, wenn Stöße von Ionen oder Elektronen (klassisch) betrachtet werden.

Wahl der Interpolationsmethode

Mit dem Attribut calcMode wird die Methode festgelegt, mit der zwischen zwei aufeinanderfolgenden Werte in der values-Werteliste interpoliert wird.

Ist für das Animationsziel keine kontinuierliche Interpolation möglich, so wird calcMode ignoriert und eine diskrete Animation durchgeführt. Zum einen wird dies angewendet, wenn die Werte des Animationszieles nie interpolierbar sind, wie etwa für stroke-linejoin, stroke-linecap, fill-rule, font-family etc. Das sind die einfachen Fälle für ein Darstellungsprogramme, die problemlos erkannt werden können.
Dann gibt es kompliziertere Fälle, wo die Interpolierbarkeit davon abhängt, welche Werte in values notiert sind. Dies tritt vor allem auf bei den etwas überfrachteten Eigenschaften fill und stroke, weil diese nicht nur interpolierbare Farbwerte haben können, sondern auch Maldienste referenzieren und den Wert 'none' annehmen können.
Enthält die values-Liste einen solchen nicht interpolierbaren Wert, so ist calcMode ebenfalls zugunsten einer diskreten Animation zu ignorieren. In der Praxis ist allerdings bei einigen Darstellungsprogrammen ein davon abweichendes fehlerhaftes Verhalten zu beobachten, wo zum Beispiel nicht interpolierbare Werte als schwarz (#000) interpretiert werden oder mitten in der Animation mit undefiniertem Zeitablauf nur zeitweilig zu einer diskreten Animation gewechselt wird. Ein solches Verhalten ist vom Autor nicht angebbar und ist daher als fehlerhaft einzustufen.
Autoren, die Wert auf eine definierte und einheitliche Präsentation legen, sollten also für eine Animation von fill und stroke das Attribut calcMode unbedingt explizit angeben, wenn die values-Liste nicht interpolierbare Werte enthält.

Ist bei animateMotion calcMode nicht angegeben, so erfolgt eine gleichmäßige Animation (Wert 'paced'), bei der der Betrag der Geschwindigkeit der Änderung konstant ist. Bei einer einzelnen Animation entspricht das auch einer Bewegung mit konstanter Geschwindigkeit. Werden mehrere Bewegungen auffaddiert, muss das nicht mehr der Fall sein.

Ist ansonsten das Attribut calcMode nicht angegeben, wird der Wert 'linear' impliziert. Ansonsten richtet sich der Zeitablauf nach den Angaben in keyTimes.

Mögliche Werte von calcMode sind:

discrete

Diskrete Animation; die Animationsfunktion springt von einem zum nächsten Wert der values-Liste ohne Interpolation.

linear

Lineare oder besser affine Interpolation; die Geschwindigkeit der Änderung für ein Intervall zwischen zwei aufeinanderfolgenden Werten der values-Liste ist konstant. Ansonsten richtet sich der Zeitablauf nach den Angaben in keyTimes.

paced

Gleichmäßige Animation; über die gesamte einfache Animationsdauer ist der Betrag der Geschwindigkeit der Änderung konstant.

spline

Interpolation durch eine kubische Bézier-Kurve; die Geschwindigkeit der Änderung für ein Intervall zwischen zwei aufeinanderfolgenden Werten der values-Liste wird bestimmt durch eine Funktion, welche entsprechend im Attribut keySplines anzugeben ist. Ansonsten richtet sich der Zeitablauf nach den Angaben in keyTimes.

Diskrete Animation

SVG
1.1	1.7	9	4	- (nicht testbar)	4 (teilweise)	?	?	?

Bei einer diskreten Animation gemäß calcMode 'discrete' ändert sich die einfache Animationsfunktion diskontinuierlich, sofern zwei aufeinanderfolgende Werte in der values-Liste unterschiedlich sind. Die Sprünge von einem Wert zum nächsten erfolgen gemäß der Angaben in keyTimes.

Anwendungsbeispiele:

Digitale Stopuhr

Digitale Stopuhr
Einfacher Prototyp einer digitalen Stopuhr. Bei diesem Beispiel ist nicht intensiv getestet worden, wie genau die Stopuhr ist, eignet sich also nicht für ernsthafte Anwendungen ohne weitere Tests und Genauigkeitsabschätzungen.

Start und Stop kann mit verschiedenen Ereignissen erreicht werden: Klicken oder Aktivieren des entsprechenden Knopfes, beziehungsweise Verwendung der Taste b für Beginn/Start und e für Ende/Stop. Ebenfalls möglich ist die Verwendung des gelben Knopfes für beides: drücken für Start, loslassen für Stop.

Digitaluhr

Ganz ähnlich funktioniert folgende Digialuhr:
Digitaluhr
Eine einfache digitale Uhr wird animiert. Die Uhr wird mittels des wallclock-Wertes des begin-Attributes gestartet. Startzeitpunkt ist wallclock(00:00), was bedeutet, dass die Animation um Mitternacht nach lokaler Zeit beginnt.

Sterntetraeder

Ähnlich wird bei folgendem Beispiel die Reihenfolge der dargestellten Flächen diskret geändert, um die Illusion eines Körpers hervorzurufen:
Sterntetraeder
Drehung eines Sterntetraeders um den Mittelpunkt des Bildes.

Lineare oder affine Animation

SVG
1.1	1.7	8	4	- (nicht testbar)	4 (teilweise)	?	?	?

Bei calcMode 'linear' ist die Interpolationsfunktion zwischen zwei aufeinanderfolgenden Werten erst a und dann b in der values-Liste i(u) = b * u + a * (1 - u) mit u als Parameter von 0 bis 1 für die relative Zeit zwischen den beiden korrespondierenden Werten in keyTimes.

Testbeispiel calcMode 'linear'

Testbeispiel
Eine lineare animateMotion eines blau gerandeten Quadrates mit einem zentrierten Kreis wird mit vier AnimateMotion eines roten Quadrates mit zentriertem Kreis verglichen. Die Bewegung des roten Quadrates folgt einer Kombination von vier animateMotion, die aufeinander folgen. Es ist die gleiche Bewegung wie die des blauen Quadrates, weil der Zeitablauf entsprechend gewählt ist. Daher verdeckt das blaue Quadrat das rote immer komplett. Der Pfad ist in grau gegeben. Die rote Füllung des Kreises wird immer vom grauen Pfad verdeckt. Acht grau gerandete Markierungen werden erhellt, wenn der Kreis exakt über der Markierung ist. Die rote Füllung der Markierung wird durch den blau gerandeten Kreis exakt verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten und animateMotion ist nicht linear. Der exakte Zeitablauf wird durch analytische Integration der Pfadlänge der Unterpfade bestimmt (was bei quadratischen und linearen Kurven durchführbar ist). Mit dieser Methode können die Pfadposition und die Zeit als Funktionen der üblichen Parametrisation der verwendeten Bézierkurven ermittelt werden.

Gleichmäßige Animation

SVG
1.1	1.7 (teilweise)	8 (teilweise)	4	- (nicht testbar)	4 (teilweise)	?	?	?

Mit calcMode 'paced' wird eine gleichmäßige Änderung bewirkt, bei der die keyTimes entsprechend automatisch berechnet werden. Dies erfordert, dass für das Animationsziel eine Abstandsfunktion existiert, welche zu solch einer gleichmäßigen Änderung führt.
Es reicht also nicht die Definition einer beliebigen Abstandsfunktion.

Generell gibt es nur für bestimmte Datentypen eine solche Abstandsfunktion mit der entsprechenden Bedeutung. Gibt es eine solche Abstandsfunktion nicht, so wird die Angabe gemäß SMIL ignoriert, was dann auch calcMode 'linear' hinausläuft.

SVG 1.1 enthält leider ein paar falsche Angaben insbesondere zu Transformationen. Diese stehen im Widerspruch zur Definition von calcMode 'paced' und sind nicht anwendbar, können aber zur Folge haben, dass einige Darstellungsprogramme diese Interpolationsmethode für Transformationen falsch umsetzen. Dies wurde soweit wie möglich in SVG tiny 1.2 korrigiert.

Abstandsfunktionen mit Relevanz für calcMode 'paced' gibt es für Skalare (einfache Zahlen mit optionaler Einheit) und für Vektoren und natürlich für eine Bewegung mit animateMotion.

Für animateMotion ist die Weglänge entlang des Pfades als Abstandsfunktion gegeben. Das kann bei komplizierteren Pfaden eine numerische Berechnung der Weglänge vom Anfangspunkt der einfachen Animationsfunktion bis zur aktuellen Position erfordern.

Bei einem Skalar ist der Abstand zwischen zwei benachbarten Werten in der values-Liste der Betrag der Differenz zwischen den beiden Werten.

Bei Vektoren gilt der euklidische Abstand, also die Wurzel aus der Summe der Quadrate der Differenzen der einzelnen Komponenten der Vektoren der benachbarten Werte in der values-Liste.

Eine Farbangabe wird als ein Vektor im dreidimensionalen Farbraum aufgefasst. Entsprechend ist der Abstand zwischen zwei benachbarten Werten in der values-Liste der euklidische Abstand also die Wurzel aus der Summe der Quadrate der Differenzen der einzelnen Farbkanäle der benachbarten Werte in der values-Liste.

Bei Transformationen wird dies Prinzip entsprechend umgesetzt.

Bei einer Translation ist es ebenfalls der euklidische Abstand, ebenso wie bei einer Skalierung, wobei die beiden Skalierungswerte für x und y als Komponenten eines Vektors im zweidimensionalen Skalierungsraum aufgefasst werden.

Scherungen sind nur einfache Skalare, entsprechend wird der Abstand berechnet.

Problematisch ist nur die Rotation, wenn sich bei der Animation das Rotationszentrum ändert. Strenggenommen existiert dafür eine sinnvolle Abstandsfunktion. Um das Verhalten von calcMode 'paced' aber immerhin für den Fall zu retten, dass das Rotationszentrum konstant bleibt, wird immer nur der Winkel als einfacher Skalar verwendet, um die Abstandsfunktion zu bestimmen.

Listen wie für stroke-dasharray oder viewBox stellen keine Vektoren dar, daher gibt es dafür keine sinnvolle Abstandsfunktion, die eine gleichmäßige Animation bewirken könnte. Gleiches gilt für Listen von Punkten, wie sie für points für polyline oder polgon angegeben werden.

Die korrespondierenden keyTimes können recht einfach bestimmt werden, indem die jeweiligen Abstände durch die Summe aller Abstände geteilt werden, was dann den Abstand relativ zur Gesamtlänge ergibt. Mit 0 beginnend ist dann jeder weitere Wert der vorherige, zu welchem noch der so bestimmte relative Abstand addiert wird.

Testbeispiel calcMode 'paced'

Testbeispiel
Eine paced animateMotion eines blau gerandeten Quadrates mit einem zentrierten Kreis wird mit vier AnimateMotion eines roten Quadrates mit zentriertem Kreis verglichen. Die Bewegung des roten Quadrates folgt einer Kombination von vier animateMotion, die aufeinander folgen. Es ist die gleiche Bewegung wie die des blauen Quadrates, weil der Zeitablauf entsprechend gewählt ist. Daher verdeckt das blaue Quadrat das rote immer komplett. Der Pfad ist in grau gegeben. Die rote Füllung des Kreises wird immer vom grauen Pfad verdeckt. Acht grau gerandete Markierungen werden erhellt, wenn der Kreis exakt über der Markierung ist. Die rote Füllung der Markierung wird durch den blau gerandeten Kreis exakt verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten und animateMotion ist nicht gleichmäßig. Der exakte Zeitablauf wird durch analytische Integration der Pfadlänge der Unterpfade bestimmt (was bei quadratischen und linearen Kurven durchführbar ist). Mit dieser Methode können die Pfadposition und die Zeit als Funktionen der üblichen Parametrisation der verwendeten Bézierkurven ermittelt werden.

Brownsche Molekularbewegung

Anwendungsbeispiel:
Brownsche Molekularbewegung
Zufallsbewegung, allerdings mit symmetrisiertem Pfad.

Bei der Brownschen Molekularbewegung wird ein großes Teilchen in einem Ensemble von Molekülen beobachtet, typisch in Gasen oder Flüssigkeiten. Die makroskopisch als Kraftstöße interpretierbaren scheinbar spontanen Änderungen der Geschwindigkeit in Richtung und Betrag sind mikroskopisch letztlich auf elastische Stöße mit Molekülen zurückzuführen, die zu klein und zu schnell sind, als dass atomare Stoßprozesse direkt beobachtet werden könnten. Heutzutage geht das schon, erfordert aber aufwendigere experimentelle Aufbauten.

Ist m die Masse des großen Teilchens und T die Temperatur des Ensembles, k die Boltzmann-Konstante, so ergibt sich die mittlere Geschwindigkeit des großen Teilchens aus der bekannten Beziehung: m v2 /2 = kT/2 pro Raumrichtung, normalerweise gibt es drei Raumrichtungen, bei dieser Animation nur zwei. Bei ausgedehnten Objekten können auch noch Rotationen und Schwingungen Energie aufnehmen. Die Animation gibt eine solch stochastische Zufallsbewegung des großen Teilchens qualtitativ wieder. Je länger der Weg bis zum nächsten Stoß, desto weniger kleine Teilchen sind vorhanden, je kleiner die Geschwindigkeitsänderung bei einem Stoß, desto größer ist das Verhältnis von kleiner zu großer Masse. Je schneller sich das Teilchen im Mittel bewegt, desto heißer das Ensemble.

Der kleine Kreis zeigt eine Näherung mit betragsmäßig immer gleicher Geschwindigkeit durch calcMode 'paced'. Beim größeren Kreis ist wegen calcMode 'linear' die Zeit zwischen zwei Stößen immer gleich. Beides ist nur ein Anhaltspunkt für das realistische Verhalten.

Interpolation durch eine kubische Bézier-Kurve

SVG
1.1	1.7	9 (8 teilweise)	4	- (nicht testbar)	4 (teilweise)	?	?	?

Im Falle von calcMode 'spline' werden die Interpolationsfunktionen mit dem Attribut keySplines angegeben.

Der Wert von keySplines ist eine Liste von Kontrollpunkten (wie immer bei Listen von Animationsattributen jeweils mit Semikolon und optionalen Leerzeichen separiert). Ein Listenwert besteht jeweils aus vier Zahlen aus dem Bereich 0 bis 1, zur Separation wird ein Komma verwendet, optional mit Leerzeichen oder statt des Semikolons auch nur ein Leerzeichen.

Das Attribut keySplines wird ignoriert, wenn calcMode nicht 'spline' ist. Ein fehlerhafter Wert ist in SVG 1.1 ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt. In SVG tiny 1.2 wird keySplines lediglich ignoriert, wenn der Wert fehlerhaft ist.

Jeder Listenwert von keySplines definiert eine kubische Bézier-Kurve in relativen Koordinaten für die Zeit und das Animationsziel für ein Zeitsegment entsprechend zwei aufeinander folgenden Werten in keyTimes und values. Anfangs- und Endzeit und Anfangs- und Endwert werden aus den Listen für keyTimes und values impliziert. Es werden nur die beiden Kontrollpunkte notiert, mit der ersten Komponente für die Zeit und der zweiten für das Animationsziel. 0 entspricht dann jeweils der ersten Zeit und dem ersten Wert von den beiden Werten, zwischen denen interpoliert wird und 1 der zweiten Zeit und dem zweiten Wert, jeweils wie sie aufeinanderfolgend in keyTimes und values stehen. Folglich hat die keySplines-Liste einen Wert weniger als keyTimes und values, weil immer zwischen zwei Listenwerten interpoliert wird.

Ist keySplines nicht angegeben, wird für jeden Listenwert "0 0 1 1" angenommen, das entspricht dem Verhalten von calcMode 'linear'.

Beispiel entsprechend denen in den Spezifikationen:

<circle r="15" cx="100">
<animate attributeName="cy" dur="40s"
  values="0;100;200;300;400"
  keyTimes="0;0.25;0.5;0.75;1"
  calcMode="spline"
  keySplines="0 0 1 1;.5 0 .5 1;0 .75 .25 1;1 0 .25 .25" fill="freeze" />
<animate attributeName="cx" dur="40s" values="0;400" fill="freeze" />
</circle>

Der Kreis wird durch Animation von cy und cx bewegt. Die x-Achse dient hier als einfache Zeitachse, die Animation in y-Richtung wird mit kubischen Bézier-Kurven interpoliert.

Das erste Segment entsprechend den ersten 10s wird wie die Voreinstellung linear oder affin interpoliert.
In den nächsten 10s ändert sich das Animationsziel zu Beginn und am Ende langsam, zwischendurch schneller.
In den dritten 10s ändert sich das Animationsziel zu Beginn schnell und am Ende langsam, noch langsamer als im vorherigen Segment.
In den letzten 10s ändert sich das Animationszeil zu Beginn sehr langsam und endet mit mittlerem Tempo.

Wenn der Autor möchte, dass beim Übergang von einem Segment zum nächsten keine abrupte Änderung des Tempos entsteht, was einem Knick im Bézier-Kurvenpfad entspricht, so sind jeweils die letzten beiden Zahlenwerte des vorherigen Segmentes und die ersten beiden des darauf folgenden Segmentes aneinander anzupassen:
Sind a,b die beiden letzten Zahlen eines Segmentes, ergeben sich daraus die ersten beiden Zahlen des folgenden Segmentes als 1-sa,1-sb mit einer positiven Zahl s, so dass das Ergebnis jeweils im Bereich zwischen 0 und 1 liegt. Ist s gleich 1, so ist der Übergang besonders 'sanft'. Sofern die values-Liste nicht streng monoton ist, gilt eine weitere Einschränkung für die Kontrollpunkte, um einen sanften Übergang bei jenen Werten zu erreichen, wo ein Extremum vorliegt, dort muss b = 1 sein. Oder andersherum ausgedrückt, wenn eine Änderung mit Extrem- und Sattelpunkten ohne abrupte Geschwindigkeitswechsel passieren soll, müssen für Extrema und Sattelpunkte immer auch die exakten Werte in der values-Liste stehen und für diese ist dann b = 1 zu verwenden.

Beispiel ähnlich wie zuvor, nur mit 'sanften' Übergängen:

<circle r="15" cx="100">
<animate attributeName="cy" dur="40s"
  values="0;100;200;300;400"
  keyTimes="0;0.25;0.5;0.75;1"
  calcMode="spline"
  keySplines="1 0 .5 .5;.5 .5 .5 1;.5 0 0 1;1 0 1 1" fill="freeze" />
<animate attributeName="cx" dur="40s" values="0;400" fill="freeze" />
</circle>

Der Kreis wird durch Animation von cy und cx bewegt. Die x-Achse dient hier als einfache Zeitachse, die Animation in y-Richtung wird mit kubischen Bézier-Kurven interpoliert.

Beispiel ähnlich wie zuvor, nur mit Extrema und 'sanften' Übergängen:

<circle r="15" cx="100">
<animate attributeName="cy" dur="40s"
  values="0;400;100;300;200"
  keyTimes="0;0.25;0.5;0.75;1"
  calcMode="spline"
  keySplines="1 0 .5 1;.5 0 .2 1;.8 0 0 1;1 0 1 1" fill="freeze" />
<animate attributeName="cx" dur="40s" values="0;400" fill="freeze" />
</circle>

Besteht nun die Aufgabe darin, eine längere, vorgegebene Bewegung durch eine Animation mit Interpolation durch kubische Bézier-Kurven anzunähern, so wird zunächst erst einmal der gesamte Ablauf grob in Unterintervalle aufgeteilt, deren Werte in einer values-Liste notiert werden, ebenso die zeitliche Zuordnung der Intervalle mittels einer keyTimes-Liste. Dabei ist darauf zu achten, dass alle Extrema der Bewegung als Werte in der values-Liste notiert sind, weil man mit keySplines keine Extrema realisieren kann. Zudem sollen die Werte der values-Liste so dicht liegen, dass eine kubische Kurve für eine gute Interpolation eines jeden Intervalles ausreicht.

Nun besteht die nächste Aufgabe darin, für das jeweilige Intervall zwischen zwei values-Listenwerten gute Werte für den entsprechenden Eintrag in der keySplines-Liste zu notieren, der die Bewegung gut interpoliert.

Sei f(s) mit s von 0 bis 1 eine solche anzunähernde Funktion auf dem Intervall zwischen zwei values-Listenwerten (egal ob für die Zeit oder die Animationsgröße), so transformiert man zu:
h(s) = (f(s)-f(0))/(f(1)-f(0))
Die in keySplines zu notierenden Punkte sind dann
P(1) = dh(0)/ds/3 und P(2) = 1 - dh(1)/ds/3
oder
P(1) = df(0)/ds/3/(f(1)-f(0)) und P(2) = 1 - df(1)/ds/3/(f(1)-f(0)).
Zulässig ist für keySplines auch noch eine Konstante für den animierten Wert, da können die gleichen Kontrollpunkte wie für die Zeit genommen werden, zum Beispiel für Zeit und animierten Wert
P(1) = 0 und P(2) = 1.

Springender Ball

Es wird dann wie oben beschrieben aufeinanderfolgend der erste Wert für die Zeit notiert, der erste Wert für die Animationsgröße P(1), dann der zweite Wert für die Zeit, dann der zweite Wert für die Animationsgröße P(2).
Entschließt man sich dazu, den Zeitablauf linear mit s zu wählen, so ist offenbar für die Zeit P(1) = 1/3 und P(2) = 2/3. Dann können etwa quadratische Bewegungsabläufe (Freier Fall, siehe folgendes Anwendungsbeispiel zum springenden Ball), aber auch kubische noch exakt mit keySplines beschrieben werden. Durch Verzicht auf einen linearen Zeitablauf ergeben sich noch mehr Möglichkeiten von Bewegungen, die exakt beschrieben werden können. Hat man in solch einem Falle die Animationsgröße explizit als Funktion der Zeit vorliegen A(t), ist natürlich der nichtlineare Zeitablauf entsprechend bei der Berechnung der keySplines-Werte für die Animationsgröße zu berücksichtigen. Gemäß den Regeln der Analysis hat man dann mit der Zeitfunktion t(s) und der Animationsgröße A(t(s)) für die Ableitungen zu verwenden:
dA/ds = dA/dt * dt/ds
Beim linaren Zeitablauf ist offenbar dt/ds = 1, also dA/ds = dA/dt, was für diese Fälle die Rechnerei etwas vereinfacht.

Das Teilen, um von f nach h zu kommen, impliziert ferner, dass es sich bei diesem Ansatz bei f um eine skalare Funktion handelt. Bei Vektoren verwendet man am besten den euklidischen Abstand vom Anfangspunkt, bei der Bewegung entlang eines Pfades mit animateMotion verwendet man die Pfadlänge bezogen auf den Anfangspunkt. Bei Listen müsste man entsprechend ein skalares Maß für den Abstand einführen, um sinnvoll etwas rechnen zu können.

Analoge 24-Stunden-Uhr (UTC)

Anwendungsbeispiele:
Springender Ball
Beschleunigte Bewegung ohne Reibung. Ein Ball wird im freien Fall beschleunigt und springt vom Boden wieder hoch. Überlagert wird das ganze von einer seitlichen Bewegung von links nach rechts. Beide Bewegungsabläufe wiederholen sich. Zusätzlich dreht sich der Ball noch um seine eigene Achse, sichtbar an kleinen dezentral darauf befindlichen Farbflecken.

Analoge 24-Stunden-Uhr (UTC)
UTC-Uhr mit federnd springenden Zeigern und 24-Stunden-Anzeige, 0-Uhr-Stellung horizontal rechts.

Angabe der Animationswerte

Wie bereits anfangs beschrieben, ist das primäre Attribut, um Animationswerte zu notieren, values. Bei animateMotion kann stattdessen auch ein Pfad angegeben oder referenziert werden, welcher angibt, wie die Bewegung erfolgt, im folgenden kurz Pfadanimation genannt.

Daneben gibt es für einfache Animationen mit nur zwei Werten noch spezielle Notationen mit den Attributen from, to und by. Aus der Kombination dieser Attribute ergeben sich drei weitere Möglichkeiten einer Notation, die definiert sind als äquivalent zu bestimmten Notationen mit values.

Darüberhinaus gibt es noch den Fall, dass nur das Attribut to von den vier Attributen angegeben ist. Sofern keine diskrete Animation vorliegt, ergibt sich damit eine weitere spezielle Interpolationsmethode mit weiteren speziellen Regeln. Kontinuierliche Animationen nur mit to haben somit ein spezifisches Verhalten, welches nicht äquivalent zu einer Animation mit values ist.

Wenngleich SMIL zum großen Teil auch die Interpretation von unsinnigen Kombinationen dieser Attribute definiert, sollten Autoren nur solche Kombinationen notieren, die auch einen Sinn ergeben. Diese samt der korrekten Interpretation (die in der geschickten Wortwahl steckt) werden in den folgenden Unterabschnitten erläutert.

Wenn etwa bei animateMotion eine Pfadanimation angegeben ist, sollte keines der hier besprochenen Attribute notiert werden. Allenfalls, wenn es Grund zur Annahme gibt, dass Darstellungsprogramme aufgrund von Fehlern oder Lücken Pfadanimationen nicht interpretieren, aber values-Animationen, so könnte es sinnvoll sein, values zusätzlich zum Pfad anzugeben, um eine Näherung an die Pfadanimation auch bei den fehlerhaften Programmen zu erreichen.

Niemals sinnvoll ist hingegen die Verwendung von from ohne to oder by. Auch eine Kombination von by und to ist niemals sinnvoll. Eine Kombination von values mit from, to oder by ergibt allenfalls einen Sinn, wenn Grund zur Annahme besteht, dass fehlerhafte Darstellungsprogramme values nicht interpretieren können, aber die anderen Attribute.

values-Animation

SVG
1.1	1.7 (falsch bei einzelnem Wert)	8	4	-	4 (falsch bei einzelnem Wert)	?	?	?

Eine values-Animation liegt vor, wenn das Attribut values notiert ist - und keine Pfadanimation vorliegt.

Der Attributwert ist eine Liste von einem oder mehreren Werten für das Animationsziel. Jeder Attributwert muss korrekt für das Animationsziel sein, ansonsten hat die Animation keinen Effekt (kann also allenfalls noch zur Synchronisation von anderen Animationen verwendet werden). Zwei aufeinanderfolgende Werte der Liste werden mit einem Semikolon voneinander separiert, zulässig sind auch optionale zusätzliche Leerzeichen davor und danach.

Ist nur ein Wert notiert, wird dieser einfach zu Beginn der einfachen Animationsdauer angenommen.

Beispiel:

<circle r="15">
<animate attributeName="cx" dur="12s" values="0;400;100;300;200" />
</circle>

cx eines Kreises wird mit einer values-Liste animiert.

Lorenz-Attraktor

Lorenz-Attraktor
Animation des Lorenz-Attraktors. Die Trajektorie wird näherungsweise gemalt, wozu die Eigenschaft stroke-dasharray mit einer langen values-Liste animiert wird. Zusätzlich wird zum Vergleich ein kleiner Kreis entlang desselben Pfades mit animateMotion bewegt. Beide haben den gleichen Zeitablauf.

Differentialgleichung:
dx/dt = k(y-x)
dy/dt = l x - y - x z
dz/dt = x y - m z

Beim vorliegenden Beispiel ist k=10, l=28, m=8/3, t die Zeit und x, y, z sind die Raumdimensionen, welche im Lorenzmodell allerdings andere Bedeutungen haben, die in der einschlägigen Literatur nachlesbar sind. Die Darstellung ist um -30 Grad um die y-Achse gedreht und dann projiziert, anschließend um 90 Grad um die z-Achse gedreht.

from-to-Animation

SVG
1.1	1.7	8	4	3.2 (teilweise)	4	?	?	?

Eine from-to-Animation liegt vor, wenn die Attribute from und to notiert sind und keine values-Animation und keine Pfadanimation vorliegt.

Die Attribute from und to haben jeweils exakt einen Wert für das Animationsziel als Wert.

Steht 'f' für den Wert von from und 't' für den Wert von to, so ist die Animation äquivalent zu einer values-Animation mit dem Wert values="f;t".

Beispiel:

<circle r="20" fill="#ccf">
<animate attributeName="cx" dur="12s" from="100" to="400" />
</circle>
<circle r="10" fill="#008">
<animate attributeName="cx" dur="12s" values="100;400" />
</circle>

Die Animation von cx der beiden Kreise sind gleich, einmal mit values angegeben, einmal mit from und to.

from-to-Animation

from-to-Animation
Ein Kreis bewegt sich von links nach rechts und zurück nach links und wieder nach rechts, wobei drei Animationen mit den Attributen from und to verwendet werden. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

from-by-Animation

SVG
1.1	1.7	8	4	3.2 (teilweise)	4	?	?	?

Eine from-by-Animation liegt vor, wenn die Attribute from und by notiert sind und keine values-Animation, keine from-to-Animation und keine Pfadanimation vorliegt. Ferner müssen die Werte des Animationszieles addierbar sein (eine additive Operation wie für Zahlen muss definiert sein, im folgenden + genannt).

Ein Verhalten für Animationsziele, deren Werte nicht addierbar sind, ist undefiniert. Naheliegend wäre, dass solche Animationen im Sinne von SMIL keinen Effekt haben, ist aber nicht explizit festgelegt. Autoren sollten solche Situationen unbedingt vermeiden.

Die Attribute from und by haben jeweils exakt einen Wert für das Animationsziel als Wert.

Steht 'f' für den Wert von from und 'b' für den Wert von by, so ist die Animation äquivalent zu einer values-Animation mit dem Wert values="f;f+b".

Beispiel:

<circle r="20" fill="#ccf">
<animate attributeName="cx" dur="12s" from="100" by="300" />
</circle>
<circle r="10" fill="#008">
<animate attributeName="cx" dur="12s" values="100;400" />
</circle>

Die Animation von cx der beiden Kreise sind gleich, einmal mit values angegeben, einmal mit from und by.

from-by-Animation

from-by-Animation
Ein Kreis bewegt sich von links nach rechts und zurück nach links und wieder nach rechts, wobei drei Animationen mit den Attributen from und by verwendet werden. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

by-Animation

SVG
1.1	- (fehlerhaft in 1.7)	9 (ab 8 teilweise)	4	- (fehlerhaft)	4	?	?	?

Eine by-Animation liegt vor, wenn das Attribut by notiert ist und keine values-Animation, keine from-to-Animation, keine from-by-Animation. keine to-Animation und keine Pfadanimation vorliegt - kurzum es ist nur by angegeben und keine der anderen Möglichkeiten, einen Animationswert anzugeben. Ferner muss der Wert des Animationsziels additiv sein.

Ein Verhalten für Animationsziele, deren Werte nicht additiv sind, ist undefiniert. Naheliegend wäre, dass solche Animationen im Sinne von SMIL keinen Effekt haben, ist aber nicht explizit festgelegt. Autoren sollten solche Situationen unbedingt vermeiden.

Das Attribut by hat exakt einen Wert für das Animationsziel als Wert.

Steht 'b' für den Wert von by und ist '0' das neutrale Element der Addition für das Animationsziel (Ist 'a' ein Wert des Animationszieles, so gilt a+0 = 0+a = a), so ist die Animation äquivalent zu einer values-Animation mit dem Wert values="0;b" und additive="sum". Eine andere Angabe für additive wird gegebenenfalls ignoriert.

Beispiel:

<circle r="20" fill="#ccf" cx="100">
<animate attributeName="cx" dur="12s" by="300" />
</circle>
<circle r="10" fill="#008" cx="100">
<animate attributeName="cx" dur="12s" values="0;300" additive="sum" />
</circle>

Die Animation von cx der beiden Kreise sind gleich, einmal mit values und additive 'sum' angegeben, einmal mit by.

by-Animation

by-Animation
Ein Kreis bewegt sich von links nach rechts und zurück nach links und wieder nach rechts, wobei drei Animationen mit dem Attribut by verwendet werden. Man beachte, dass by-Animationen (ohne andere Attribute wie from, to, values) etc per Voreinstellung additiv sind. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

by-Animation

by-Animation
Ein Kreis bewegt sich achtmal von links nach rechts, wobei eine wiederholte Animation mit dem Attribut by genutzt wird. Man beachte, by-Animationen sind additiv, aber nicht akkumulativ per Voreinstellung. Diese Animation wird mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang des gegebenen grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

to-Animation

SVG
1.1	1.7 (in wenigen Fällen)	9 (in einfachen Situationen, ab 8 in wenigen Fällen)	4 (teilweise)	3.2 (in sehr wenigen Fällen)	4 (teilweise)	?	?	?

Eine to-Animation liegt vor, wenn das Attribut to notiert ist und keine values-Animation, keine from-to-Animation und keine Pfadanimation vorliegt. Ferner muss der Wert des Animationsziels addierbar sein, sofern keine diskrete Animation vorliegt. Bei Verwendung des Elementes 'set' liegt ein Sonderfall vor, der bei der Element-Definition beschrieben wird.

Ein Verhalten für Animationsziele, deren Werte nicht addierbar sind (etwa Buchstabenkombinationen wie bei der Eigenschaft stroke-linecap) ist diskret. Der Autor sollte dies dann explizit angeben, da die formal vorgesehene automatische Erkennung des calcMode bei vielen Programmen nicht wie definiert funktioniert.

Das Attribut to hat exakt einen Wert für das Animationsziel als Wert.

Angaben zu additive und accumulate werden ignoriert.

Ist calcMode 'discrete' angegeben, so wird der Wert von to gleich zu Beginn der einfachen Animationsdauer angenommen und der darunterliegende Wert wird ignoriert. Einige Programme haben in dieser Hinsicht allerdings eine falsche Implementierung, dort springt der Wert erst nach der halben einfachen Animationsdauer um. Daher ist zu überlegen, ob es nicht sinnvoller ist, stattdessen die Animation mit einem values-Wert zu notieren oder das Element 'set' zu verwenden, um den gleichen Effekt zu erzielen und die Fehler der Darstellungsprogramme zu umgehen.

Andere Angaben zu calcMode werden ignoriert und eine spezifische Interpolationsformel verwendet, mit der vom darunterliegenden Wert zum angegebenen to-Wert interpoliert wird.

Dann sei u der darunterliegende Wert, v der Wert von to, d die einfache Animationsdauer und t ein Parameter, welcher von 0 bis d läuft.

Damit gilt für die einfache Animationsfunktion:
f(t,u) = (u * (d-t)/d) + (v * t/d)

Insbesondere kann der darunterliegende Wert u selbst zeitabhängig sein, was das zeitliche Verhalten komplizierter werden lässt.

Das Verhalten für Wiederholungen ist das gleiche wie für values-Animationen.

Wird die Animation eingefroren, so wird der aktuelle Wert beibehalten, unabhängig von Änderungen des darunterliegenden Wertes. Auch wenn andere Animationen mit niedrigerer Priorität aktiv sind, während die to-Animation eingefroren ist, ändert sich der Wert nicht.
Dies gilt insbesondere auch, wenn die aktive Dauer der Animation zum Beispiel mit end verkürzt wird. Der Wert am Ende der aktiven Dauer ist der eingefrorene Wert und dominiert alle Animationen mit niedrigerer Priorität.
Viele Implementierungen sind in dieser Hinsicht allerdings fehlerhaft.

Beispiele:

<circle r="20" fill="#ccf" cx="100">
<animate attributeName="cx" dur="12s" to="400" />
</circle>
<circle r="10" fill="#008" cx="100">
<animate attributeName="cx" dur="12s" values="100;400" />
</circle>

Die Animation von cx der beiden Kreise sind gleich, einmal mit values angegeben, einmal mit to.

<circle r="20" fill="#ccf" cx="100">
<animate attributeName="cx" dur="12s" to="400" />
<animate attributeName="cx" dur="12s" to="100" />
<animate attributeName="cy" dur="12s" values="100;400" fill="freeze" />
</circle>

cx und cy eines Kreises werden animiert, für cx sind dies zwei to-Animationen, für cy eine values-Animation mit zwei Werten. Der Kreis bewegt sich entlang einer Parabel.

<circle r="20" fill="#ccf" cx="100">
<animate attributeName="cx" dur="12s" to="400" />
<animate attributeName="cx" dur="12s" to="100" repeatDur="6s" fill="freeze" />
<animate attributeName="cy" dur="12s" values="100;400" />
</circle>

cx und cy eines Kreises werden animiert, für cx sind dies zwei to-Animationen, für cy eine values-Animation mit zwei Werten. Der Kreis bewegt sich entlang einer Parabel. Nach der halben einfachen Animationsdauer endet die to-Animation mit höherer Priorität und der aktuelle Wert (das Extremum der Parabel) wird eingefroren.

Interaktive to-Animation

Interaktive to-Animation
Die Füllung eines Kreises ändert sich mit to-Animationen jeweils mit den Ereignissen mouseover, mousedown, mouseup, mouseout. Weil restart auf whenNotActive steht, läuft eine einmal gestartete Animation auf jeden Fall durch bis zu seinem angegebenen Wert. Bereits laufende andere Animationen mit niedrigerer Priorität bilden den darunterliegenden Wert. Insgesamt ergibt sich so immer ein kontinuierlicher Verlauf vom darunterliegenden Wert bis zum angegebenen ohne Sprünge.

Als Anwendung kann das insbesondere für Knöpfe und dergleichen hilfreich sein, wenn dort eine kontinuierliche Änderung des Knopfes oder eines anderen Objektes durch verschiedene Nutzerinteraktionen beabsichtigt wird, bei der keine Sprünge auftreten sollen. Das Verhalten von to-Animationen unterscheidet sich allerdings im Detail etwas von den Übergängen, die in einem CSS3-Modul geplant sind (englisch: CSS3 transition module).

Test des korrekten Verhaltens von to-Animationen.

Test des korrekten Verhaltens von to-Animationen.
Links und rechts sind jeweils nahezu gleichartige Animationen zu sehen. Es wird lediglich jeweils eine andere to-Animation vorzeitig eingeforen.

Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen für cx verwendet werden und eine einfache für cy. Die Animation für cy und die eine für cx wird zweimal ausgeführt, die andere für cx nur 1.5 mal.

Zu beachten ist, dass links die zweite Animation auf halben Wege eingefroren wird. Weil sie Priorität hat, wird die gesamte Animation von cx eingefroren. Ferner ist zu beachten, dass rechts die erste Animation auf halben Wege eingefroren wird. Weil sie niedrigere Priorität hat, überlebt die zweite Animation von cx auf einem geraden Pfad.

Für die zweite cx-Animation ist accumulate="sum" notiert. Weil to-Animationen immer mit dem drunterliegenden Wert beginnen und mit dem to-Wert enden, kann es keinen sichtbaren kumulativen Effekt geben (Dies ist explizit in SMIL2.0/2.1 erwähnt).

Der Pfad ist zum Vergleich in grau eingezeichnet, die dünne Linie für den ersten Durchlauf, die dicke für den zweiten Durchlauf. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Animationselemente

animate

SVG
1.1	1.7 (teilweise)	8 (teilweise, ab 9 größtenteils)	4	3.2 (teilweise)	4 (teilweise)	?	?	?

Das animierte Rechteck

Das Element animate wird verwendet, um ein einzelnes Attribut oder eine einzelne Eigenschaft zeitlich zu verändern, zu animieren.

Mit animate können alle Datentypen von Attributen oder Eigenschaften animiert werden, welche als animierbar gekennzeichnet sind, nur mit Ausnahme von Transformationen.

Beispiel:

<rect width="5" height="5">
   <animate attributeName="width" from="10" to="100" 
            begin="5s" dur="10s" />
   <animate attributeName="height" from="100" to="10"
            begin="5s" dur="10s" />
</rect>

Höhe und Breite eines Rechtecks werden animiert. Verwendet wird jeweils eine from-to-Animation.

Die Entdeckung der Täuschung (6:wiki)

Weitere etwas aufwendigere Beispiele, welche animate verwenden:
Die Entdeckung der Täuschung (6:wiki)
Es ist vieles nicht das, was es zu sein scheint und eine Menge Menschen arbeiten angestrengt daran, anderen Menschen etwas vorzutäuschen, was offensichtlich nicht sein kann, um eine sehr künstliche Umgebung irgendwie etwas heimeliger zu machen. Der Konflikt zwischen der offensichtlichen Lüge und der vorgetäuschten Heimeligkeit belastet den Betrachter. Wenn das Offensichtliche zum Absurden wird, die Täuschung offenbar, erleichtert das den Betrachter?

Eine quadratische Fläche scheint einen diffusen Schatten zu werfen. Nach fünf Sekunden wandelt sich die Form der Fläche leicht, der diffuse Schatten ebenso, doch dann bewegt sich die Lichtquelle, doch der Schatten wandert nicht mit - die Täuschung ist entdeckt, entlarvt.

Konstruktion (1:wiki)

Konstruktion (1:wiki)
Die Ästhetik des Einfachen fasziniert immer wieder. Wer schon einmal versucht hat, mit eigenen Händen ohne großartiges Werkzeug aus einem Stein eine perfekte Kugel zu erschaffen, wer auch nur versucht hat, aus einem Haufen gleicher Holzlatten einen perfekten Würfel zu zimmern, der kennt die Schwierigkeiten, aber auch das Spannende und Interessante, die im Detail des Einfachen liegen, der weiß, was die Idee vom Plan, von der Konstruktion und vom späteren Werk unterscheidet.

Eine einfache Konstruktion aus Strecken, die eine Fläche umschließen, wird animiert. Ein interessantes konstruktives Problem ergibt sich in der Animation, weil die Anfangs- und Endpunkte der Strecken meist nicht die Eckpunkte der Fläche sind. Sofern die Strecken lang genug sind, definieren die Schnittpunkte der Strecken ebenfalls Ecken einer Fläche, die an den Stützpunkten der Animation jeweils die gleichen sind sind wie die der dargestellten Fläche.

set

SVG
1.1	1.7 (teilweise)	8 (teilweise, ab 9 größtenteils)	4	3.2 (teilweise)	4 (teilweise)	?	?	?

Das Element set wird verwendet, um ein einzelnes Attribut oder eine einzelne Eigenschaft zeitlich auf exakt einen einzigen Wert zu setzen, gegebenenfalls zeitlich begrenzt.

Animationen mit set sind weder additiv noch kumulativ, die Attribute additive und accumulate sind nicht verfügbar. set ersetzt immer den darunterliegende Wert.

Der zu setzende Wert wird mittels des Attributes to angegeben. Die Attribute values, from und by sind nicht verfügbar.

Ist v der mit to angegebene Wert, so ist die einfache Animationsfunktion:
f(t, u) = v.

Folglich ist die Animation mit set äquivalent zu einer mit animate, bei der values den gleichen Wert wie to hat oder wie animate mit to mit dem gleichen Wert und zusätzlich calcMode="discrete".

Weil die einfache Animationsfunktion zeitlich konstant ist, sind Attribute zur Steuerung des Zeitablaufs und der Interpolationsmethode bei set nicht verfügbar, also weder calcMode noch keyTimes noch keySplines. Einfache Animationsdauer, Wiederholungen, Beginn und Ende etc sind wie beschrieben angebbar und beeinflussbar. Eine Wiederholung mag allerdings bei einem konstanten Wert nur von begrenztem Nutzen sein.

Mit set können alle Datentypen von Attributen oder Eigenschaften animiert werden, welche als animierbar gekennzeichnet sind, nur mit Ausnahme von Transformationen.

Beispiele:

<circle r="15">
<set attributeName="cx" dur="12s" begin="6s" to="400" />
<set attributeName="cy" begin="6s" end="18s" to="400" fill="freeze" />
<set attributeName="r" begin="1s;5s;9s;13s;17s;21s" dur="2s" to="100" />
<set attributeName="fill" begin="3s" max="15s" to="blue" />
<set attributeName="stroke" dur="1s" begin="9s" repeatDur="19s" to="red" />
</circle>

Einige Attribute und Eigenschaften werden mit set gesetzt, teils wiederholt oder mit erneutem Beginn.

fill mit set

Prototyp eines Comics

fill mit set
Mit einem Klick auf einen der kleinen Kreise oben wird die Farbe des großen Kreises gesetzt. Zu beachten ist, dass der Klick auf den kleinen Kreis die Startzeit für die betreffende set-Animation auflöst. Die ganze Geschichte wird mit einem weiteren Klick auf den gleichen Kreis wiederholt.

Prototyp eines Comics
Eine Anspielung zu Samuel Becketts 'Warten auf Godot'...

Bei dem Comic wird display mittels set animiert.

Das Dokument ist so angelegt, dass bei einer kompletten Implementierungslücke hinsichtlich Animation eine statische Version des Comics verfügbar ist.

animateColor

SVG
1.1	1.7 (teilweise)	8 (teilweise)	-	3.2 (in wenigen Fällen)	4 (teilweise)	?	?	?

Das Element animateColor wird verwendet, um ein einzelnes Attribut oder eine einzelne Eigenschaft zeitlich zu verändern, zu animieren, falls damit eine Farbe repräsentiert wird. Die sind zum Beispiel fill und stroke, sofern Farbwerte animiert werden sollen und keine Maldienste.
Die Animation mit animateColor hat für die damit animierbaren Attribute oder Eigenschaften den gleichen Effekt wie die korrespondierende Animation mit animate, technisch bietet sich also nichts neues. Auch semantisch ergibt sich nicht eine relevante Information durch dies spezifischere Element, weil durch das Animationsziel ohnehin klar ist, dass eine Farbe animiert wird. Bei animateColor ist lediglich ausgeschlossen, dass auch ein Maldienst gegen einen anderen oder gegen eine Farbe ausgestauscht werden könnte.

Es sind also nur Farbwerte als Animationswerte erlaubt, beziehungsweise Angaben, die in einen Farbwert umwandelbar sind wie 'currentColor' oder 'inherit', sofern damit ein Farbwert geerbt wird.
Angegebene Werte oder Zwischenwerte der Animation könne durchaus auch außerhalb des zulässigen Bereiches für Farbwerte liegen, was insbesondere bei additiven Animationen hilfreich sein kann. Das Darstellungsprogramm soll nur den letztlich präsentierten Wert auf den erlaubten Bereich eingrenzen, dort auf den nächstgelegenen zulässigen Wert, aber keine Zwischenergebnisse oder angegebene Werte.

Die Interpolation bei to-Animationen und auch bei calcMode 'paced' erfolgt im dreidimensionalen Farbraum. Die Abstandsfunktion ist der euklidische Abstand.

Beispiel:

<g stroke="#80a">
<animateColor attributeName="stroke" dur="11" begin="5" repeatDur="indefinite"
              values="#a08;#0a8;#a80;#8a0;#80a;#08a" />
<circle r="100" fill="#ccf" stroke="#060" cx="100" stroke-width="10" color="green">
<animateColor attributeName="color" dur="9" begin="5" repeatDur="indefinite"
              values="#ff0;#0ff;#f0f" />
<animateColor attributeName="fill" dur="40" begin="5" repeatDur="indefinite"
              values="#000;blue;rgb(50,0,255);currentColor" />
<animateColor attributeName="stroke" dur="43" begin="7" repeatDur="indefinite"
              values="#fff;green;rgb(50,255,0);inherit" />
</circle>
</g>

color, stroke und fill werden mit einigen Werten animiert. Weil auch die Werte 'currentColor' und 'inherit' verwendet werden, die wiederum animierte Werte in die Animation integrieren, die einen anderen Zeitablauf haben als die Animationen, bei denen die Werte verwendet werden, ergibt sich ein Effekt, der sich über lange Zeit nicht wiederholt.

additive und kumulative animateColor

additive und kumulative animateColor
Die from-to-, from-by- und by-Animationen angewendet auf die Fülleigenschaften von Kreisen werden mit den entsprechenden values-Animationen einschließlich additivem und kumulativem Verhalten für den Rand verglichen. Zusätzliche unterliegende gefüllte Kreise simulieren das gleiche Verhalten, wobei immer additive 'replace' und accumulate 'none' verwendet werden. Die Füllung des Hintergrundkreises, des Randes und der Füllung des kleineren Testkreises darin sind immer genau dieselbe. Falls daher Ringe unterschiedlicher Farbe in den zentrierten Kreissystemen sichtbar werden, ist der Test fehlgeschlagen. Allerdings kann jedes separierte Kreissystem, welches jeweils einen von 12 Subtest repräsentiert, eine andere Farbe aufweisen.

animateTransform

SVG
1.1	1.7 (teilweise)	8 (teilweise, ab 9 größtenteils)	4 (größtenteils)	-	4 (teilweise)	?	?	?

Das Element animateTransform wird verwendet, um ein einzelnes Transformationsattribut wie transform, gradientTransform oder patternTransform zeitlich zu verändern, zu animieren. Nur Listen von Transformationsattributen können mit animateTransform animiert werden, keine anderen Datentypen.

Die zur Animation vorgesehenen Transformationstypen sind Translation ('translate'), Skalierung ('scale'), Scherung ('skewX' und 'skewY') und Drehung ('rotate'). Der Typ Matrix ('matrix') ist nicht zur Animation vorgesehen, der Grund dafür ist unbekannt (Auch Nachfragen bei der SVG-Arbeitsgruppe des W3C haben in der Hinsicht keinen Grund ergeben).

Der zu animierende Typ wird mit dem Attribut type angegeben.

Mögliche Werte von type sind:

translate

Translation

scale

Skalierung

rotate

Drehung

skewX

Scherung in x-Richtung

skewY

Scherung in x-Richtung

Die Angabe eines anderen Typs hat in SVG tiny 1.2 zur Folge, dass animateTransform ignoriert wird, als sei es nicht angegeben.

Die erlaubten Animationswerte sind jene, die für den entsprechenden Typ erlaubt sind.

Eine nicht-additive Animation ersetzt wie gehabt den darunterliegenden Wert des kompletten Attributes, welches das Animationsziel ist (also nicht nur einen Teil des Wertes, welcher dem Typ entspricht).

Bei einer additiven Animation wird die Matrix, welcher der Animationsfunktion entspricht, von rechts hintendran multipliziert.
Ist x ein Punkt im aktuellen Koordinatensystem, x' der Punkt im vorherigen Koordinatensysten, dem des übergeordneten Elementes, U die Matrix, welche dem darunterliegenden Wert entspricht und F die Animationsfunktion, so ist:
x' = U F x

Die Interpolationsfunktion und die Animationfunktion und gegebenenfalls kumulative Effekte werden anhand der gegebenen Werte berechnet, nicht anhand der damit repräsentierten Matrizen. Lediglich hinsichtlich der Additivtät ergibt sich die Sonderregel, die Animation hintendranzumultiplizieren und nicht zu addieren (was auch kaum möglich wäre, wenn nicht der darunterliegende Wert zufällig genau zu dem Typ gehört, der mittels type angegeben ist.

Die Anforderungen von SMIL für to-Animationen mit der explizit definierten einfachen Animationsfunktion kollidieren mit der Anforderung, dass eine additive Animation hintendran multipliziert werden soll, weil die von SMIL definierte Animationsfunktion eine additive Operation ist und keine multiplikative. to-Animationen sind daher für animateTransform undefiniert (was auch in SVG tiny 1.2 explizit angegeben ist).

Formal mathematisch könnte das Problem der Kollision der Anforderungen gelöst werden, solange die Matrix invertierbar ist, welche dem darunterliegenden Wert entspricht. Dann ließe sich immer eine Matrix angeben, die hintendran multipliziert werden kann und trotzdem der einfachen Animationsfunktion von SMIL entspräche. Da nicht alle Matrizen invertierbar sind, ist das aber letztlich keine zufriedenstellende Lösung. Da to-Animationen sowieso eine spezielle Interpolationsmethode definieren, die eine bestimmte Funktionalität bereitstellt, wäre es am einfachsten, die Multiplikationssonderregel fallenzulassen und einfach die Matrizen zu addieren. Dafür gibt es allerdings bislang (2010) keine Mehrheit oder Entscheidung bei der SVG-Arbeitsgruppe des W3C.

Beispiel:

<ellipse rx="100" ry="200" fill="blue" transform="skewX(30)">
  <animateTransform attributeName="transform"
    type="rotate" values="-30;180;400;-360"
    begin="5s" dur="30s"
    additive="replace" fill="freeze"/>
  <animateTransform attributeName="transform"
    type="scale" values="-1,1;1.7;0.6,-0.9;2"
    begin="10s" dur="40s"
    additive="sum" fill="freeze"/>
  <animateTransform attributeName="transform"
    type="translate" values="-100,100;50,50;200;-100"
    begin="15s" dur="50s"
    additive="sum" fill="freeze"/>
</ellipse>

Verschiedene Transformationsanimationen werden auf eine Ellipse angewendet, die erste ersetzt den darunterliegenden Wert, die anderen sind additiv.

Animierte Lissajous-Figur, dreidimensional

Animierte Lissajous-Figur, dreidimensional
Ein harmonischer Oszillator in drei Dimensionen realisiert mit animateTransform. Die values-Listen sind eine grobe Näherung für die harmonische Bewegung. Mittels calcMode spline ließe sich dies noch deutlich verbessern.

Foucaultsche Pendel

Foucaultsche Pendel
Vier harmonische Oszillatoren mit überlagerter Drehung. Das ist eigentlich so gedacht, dass der Betrachter samt Darstellungsprogramm gedreht wird und nicht die Pendel selbst, wie es beim Foucaultschen Pendel auch der Fall ist: Die Erde dreht sich unter den Pendeln weg und der Betrachter steht auf der bewegten Erde, vermutet aber aus seiner Perspektive, dass die Pendel sich drehen.

Die harmonischen Oszillatoren sind jeweils mit einer einfachen Werteliste genähert, eine präzisere Näherung wäre mit kubischen splines möglich.

animateMotion

Das Element animateMotion wird verwendet, um ein Animationszielelement entlang eines Pfades zu bewegen.

Die Bewegung entspricht einer ergänzenden Translationstransformation. Ergänzend und unabhhängig von jenen Transformationen, die mit transform und animateTransform angegeben sind. Die ergänzende Transformation ist so zu interpretieren, dass sie an den sonstigen Transformationseffekt hintendranmultipliziert wird. Auch bei additiven Animationen ist das Verhalten von animateMotion unabhängig von animateTransform.

Bei values und den anderen Attributen zur Angabe von Animationswerten werden Punkte (Koordinatenpaare) angegeben. Die Koordinaten werden voneinander durch ein Komma mit optionalen Leerzeichen oder auch nur durch Leerzeichen voneinander getrennt, benachbarte Koordinatenpaare voneinander wie üblich für Animationsattribute mit Semikolon und optionalen Leerzeichen.

Alternativ kann im Attribut path ein Pfad notiert werden analog zu Pfaden im Attribut d des Elementes path. Alternativ kann auch mit dem Element mpath ein Pfad referenziert werden. Es soll nur eine der Möglichkeiten verwendet werden, den Pfad für die Bewegung anzugeben. Hält sich der Autor nicht daran, gilt, dass ein angegebener mpath alle anderen Möglichkeiten überschreibt. Ist mpath nicht angegeben, überschreibt ein gegebenenfalls notierter path alle anderen Möglichkeiten. Für values und die anderen Attribute zur Angabe von Interpolationswerten gilt die bereits definierte Reihenfolge.

Die voreingestellte Interpolationsmethode ist paced, wobei die Pfadlänge entlang des Weges als Abstandsfunktion verwendet wird. Das kann bei komplizierteren Pfaden eine numerische Berechnung der Weglänge vom Anfangspunkt der einfachen Animationsfunktion bis zur aktuellen Position erfordern.
Für Autoren beachtenswert ist, dass aus additiven Translationen im Allgemeinen keine gleichmäßige Bewegung mehr folgt.

Die anderen Interpolationsmethoden einschließlich der to-Animation sind ebenfalls verfügbar.

Mittels keyPoints können entlang des Weges in Einheiten der Gesamtlänge Schlüsselpunkte angegeben werden, zwischen denen dann die entsprechende Interpolation stattfindet. Sind diese nicht angegeben, gelten bei einer values-Animation die angegebenen Punkte als Schlüsselpunkte und bei Pfaden die Punkte (nicht die Kontrollpunkte). Da zu einem gegebenenfalls mit den Kommandos M oder m angegebenen Punkt diskret gesprungen wird, trägt die Sprungdistanz nicht zur Abstandsberechnung bei und einmal abgesehen vom ersten Pfadbeginn gelten weitere M-Kommandos nicht als Schlüsselpunkte.
Die Schlüsselpunkte treten so also gegebenenfalls an die Stelle der values-Listenwerte hinsichtlich etwa der speziellen Regeln zu Ermittlung der Anzahl der Listenwerte von keyTimes und keySplines

Bei einer diskreten Animation wird von Schlüsselpunkt zu Schlüsselpunkt gesprungen. Bei einer linearen Animation ist der Betrag der Geschwindigkeit der Bewegung von einem Schlüsselpunkt zu nächsten konstant und ändert sich gegebenenfalls abrupt für das nächste Interpolationsintervall. Entsprechend wird bei einer spline-Interpolation der spline jeweils für ein Interpolationsintervall zwischen zwei aufeinanderfolgenden Schlüsselpunkten angewendet.

mpath

SVG
1.1	1.7 (teilweise, nicht bei animiertem Pfad)	9	4 (teilweise, keine animierten Pfade)	-	4	?	?	?

Das Element mpath kann als Kindelement von animateMotion notiert werden, um einen anderweitig angegebenen Pfad zu referenzieren.

Zur Referenzierung eines anderen Pfades wird das Attribut href von XLink verwendet, mit dem dann folglich auch die anderen Attribute von XLink verfügbar sind. In den tiny-Profilen ist der Wert eine Referenz zu einem Fragmentidentifizierer eines Elementes path im selben Dokument, in SVG 1.1 kann der Pfad auch in einem anderen Dokument notiert sein, dann wird die URI des Dokumentes notiert mit anschließendem Fragmentidentifizierer des gewünschten Elementes path.

In SVG tiny 1.2 ist der voreingestellte Wert ein leeres Attribut, was bewirkt, dass das Zielelement nicht bewegt wird. Ein ungültiger Wert wie die Referenz eines nicht existierenden Elementes oder eines, welches keine Pfad repräsentiert, resultiert im gleichen Verhalten.

Beispiele:

<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />

<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion dur="12s">
  <mpath xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#p" />
</animateMotion>
</circle>

Der Kreis bewegt sich enlang des blauen Pfades, welcher für animateMotion mit mpath referenziert wird.

animateMotion und mpath

animateMotion und mpath, animierter Pfad

animateMotion und mpath
Zwei Kreise werden entlang eines Pfades bewegt, welcher aus Unterpfaden besteht, die voneinander mit M-Kommandos getrennt sind. Die wiederholte Dauer der Animation ist 30s. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

animateMotion und mpath, animierter Pfad
Ein blaues Rechteck und ein roter Kreis werden entlang eines hellblauen Pfades mit einer Dauer von 30s bewegt. Der Pfad selbst ist animiert. Dies resultiert in einer Bewegung entlang des grauen Pfades. Das Rechteck ist entlang der dünnen hellblauen Linie ausgerichtet, nicht entlang der dicken grauen Linie! Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

path

SVG
1.1	1.7	8	4	-	4	?	?	?

Mit dem Attribut path kann ein Pfad angegeben werden, entlang dessen die Bewegung mit animateMotion erfolgt. Der Wert von path ist ein Pfad analog zu Pfaden im Attribut d des Elementes path.

Beispiele:

<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion dur="12s"
   path="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />
</circle>

Der Kreis bewegt sich enlang eines mittels path notierten Pfades.

animateMotion und path

animateMotion und path
Zwei Kreise werden entlang eines Pfades bewegt, welcher aus Unterpfaden besteht, die voneinander mit M-Kommandos getrennt sind. Die wiederholte Dauer der Animation ist 30s. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

keyPoints

SVG
1.1	1.7 teilweise	8 bis 9 teilweise; ab 9.5 größtenteils	8 (4 teilweise)	-	4 teilweise	?	?	?

Das Attribut keyPoints gibt eine Liste von Schlüsselpunkten für die Interpolation an.

Der Wert ist eine Liste von Zahlen zwischen 0 und 1 einschließlich dieser beiden Zahlen. Benachbarte Zahlen werden mit einem Semikolon und optionalen Leerzeichen voneinander separiert. Die Zahl steht für den Abstand zum Pfadbeginn in relativen Einheiten der gesamten Pfadlänge. Der jeweilige Schlüsselpunkt befindet sich dann im entsprechenden Abstand entlang des Pfades relativ zum Beginn des Pfades. 0 ist also der Beginn des Pfades, 0.5 die Mitte und 1 das Ende. Die Liste muss nicht monoton sein.

Sind keyTimes und keyPoints beide angegeben, müssen sie die gleiche Anzahl von Listenwerten haben. Ist keyTimes nicht angegeben, wird die Anzahl der keyTimes von der Anzahl der Schlüsselpunkte impliziert und die Zeiten der keyTimes sind wie bereits beschrieben äquidistant.

Ein falscher Wert bewirkt in SVG tiny 1.2, dass das Attribut ignoriert wird. Dies trifft auch zu, wenn die Anzahl der Listenpunkte von keyTimes und keyPoints nicht übereinstimmen. In SVG 1.1 stellen falsche Werte oder eine falsche Anzahl einen Fehler dar, der zum Abbruch der Darstellung des Dokumentes führt.

Beispiele:

<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />

<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion dur="60s" calcMode="discrete" fill="freeze"
   keyPoints="0;0.5;0.1;0.9;0.4;1;0.8;0.2;0.6;0"
   keyTimes="0;0.2;0.25;0.3;0.35;0.4;0.7;0.75;0.8;1">
  <mpath xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#p" />
</animateMotion>
</circle>

Der Kreis springt an verschiedene Stellen entlang des blauen Pfades.

keyPoints können auch recht nützlich sein, um Elemente entlang eines Pfades zu positionieren, ohne die Position selbst berechnen zu müssen:

<g xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />

<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.1" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.2" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.3" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.4" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.5" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.6" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.7" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.8" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="0.9" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
<circle r="15" fill="none" stroke="green" stroke-width="6">
<animateMotion calcMode="discrete" keyPoints="1" keyTimes="0">
  <mpath xlink:href="#p" />
</animateMotion>
</circle>
</g>

keyPoints zur Positionierung von Markierungen

keyPoints - einfacher Test mit kontinuierlicher Bewegung

Um Fehler bei Opera und Batik/Squiggle zu umgehen, kann auch eine andere Variante verwendet werden, die dann zwei keyPoints und keyTimes angibt, obgleich das formal technisch bei einer diskrete Animation nicht notwendig ist, die aufgrund einer fehlenden Angabe der einfachen Animationsdauer sowieso nie auf den zweiten Wert springt:
keyPoints zur Positionierung von Markierungen
Die hellgrünen Pfeile werden mit animateMotion und keyPoints in gleichen Abständen entlang des Pfades positioniert. Anders als beim Einsatz von marker, dem Element zur Positionierung von Markierungen in SVG können mit animateMotion und keyPoints beliebige Positionen entlang des Pfades als Positionen für Markierungen festgelegt werden.

keyPoints - einfacher Test mit kontinuierlicher Bewegung
Zwei nacheinander ausgeführte Bewegungen eines Kreises mit animateMotion werden mit einer Animation der Kreismitte so überlagert, dass sich einer Bewegung entlang des grauen Pfades ergibt. Die Positionen resultieren aus den angegebenen keyPoints, einmal mit explizit angegebenen keyTimes und einmal mit implizierten.

Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

rotate

SVG
1.1	1.7	8	4	-	4	?	?	?

Damit ein Autor nicht selbst berechnen muss, wie ein Objekt relativ zur Bewegung ausgerichtet ist, kann dies mit rotate angegeben werden. rotate stellt eine zusätzliche Rotationstransformation dar (die wie animateMotion selbst unabhängig von anderen Transformationen interpretiert wird). Die Rotation stellt eine Drehung um den Ursprung des aktuellen Koordinatensystems dar, nachdem die zusätzliche Transformation für animateMotion durchgeführt wurde.

Die möglichen Wert von rotate sind:

'auto'

Automatische Drehung, so dass die x-Richtung in Bewegungsrichtung zeigt.

'auto-reverse'

Automatische Drehung, so dass die x-Richtung entgegen der Bewegungsrichtung zeigt, also relativ zu 'auto' um 180 Grad gedreht.

Zahl

konstanter Drehwinkel in Grad, um den das Animationsziel gedreht wird.

Ist das Attribut nicht angegeben, so wird '0' angenommen.

Beispiele:

<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />
<g fill="none" stroke="green" stroke-width="6">
<animateMotion dur="12s" rotate="auto">
  <mpath xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#p" />
</animateMotion>
<path d="M-50,0 50,0M0,20 0,50 0,-20" />
</g>

Ein Pfeil wird entlang des blauen Pfades bewegt, wobei er in Bewegungsrichtung zeigt.

<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />
<g fill="none" stroke="green" stroke-width="6">
<animateMotion dur="12s" rotate="auto-reverse">
  <mpath xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#p" />
</animateMotion>
<path d="M-50,0 50,0M0,20 0,50 0,-20" />
</g>

Ein Pfeil wird entlang des blauen Pfades bewegt, wobei er entgegen der Bewegungsrichtung zeigt.

<path id="p"
  fill="none" stroke="blue"
  d="M100,400C500,400 400,500 400,100
     M100,300C100,0 0,100 300,100" />
<g fill="none" stroke="green" stroke-width="6">
<animateMotion dur="12s" rotate="37">
  <mpath xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#p" />
</animateMotion>
<path d="M-50,0 50,0M0,20 0,50 0,-20" />
</g>

Ein Pfeil wird entlang des blauen Pfades bewegt, der Pfeil ist um 37 Grad gedreht.

animateMotion mit rotate

animateMotion mit rotate
Einige Pfeile bewegen sich entlang des blauen Pfades. Die beiden zuerst erscheinenden Pfeile sind dabei entlang der Pfadrichtung ausgerichtet. Weitere Pfeile sind mit festem Winkel ausgerichtet.

origin

origin gibt in SMIL den Ursprung für die Bewegung an, Der Wert ist 'default'. Das Attribut ist in SVG ohne Bedeutung. Ursprung für die Bewegung ist der Ursprung des lokalen Koordinatensystems.

Weitere Beispiele zu animateMotion

additives und kumulatives Verhalten

additives und kumulatives Verhalten
Die from-to-, from-by- und by-Animationen angewendet auf die animateMotion blau gerandeter Pfade werden mit den entsprechenden values-Animationen einschließlich additivem und kumulativem Verhalten für die unterliegenden roten Pfade verglichen. Zusätzliche dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer additive 'replace' und accumulate 'none' verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist ein Fehler aufgetreten, wenn etwas Rotes sichtbar wird.

animateMotion und Attribut to

animateMotion und Attribut to
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen vom Typ animateMotion für x verwendet werden und eine einfache für cy. Die Animation für cy und die erste für x wird zweimal ausgeführt, die zweite für x nur 1.5 mal. Zu beachten ist, dass the zweite Animation auf halben Wege eingefroren wird. Weil sie Priorität hat, wird die gesamte Animation von x eingefroren. Der Pfad ist zum Vergleich in grau eingezeichnet, die dünne Linie für den ersten Durchlauf, die dicke für den zweiten Durchlauf. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Fortgeschrittener Test für calcMode 'spline', keySplines

Fortgeschrittener Test für calcMode 'spline', keySplines
Ein blau geränderter Kreis wird mit sieben verschiedenen animateMotion bewegt, wobei calcMode 'spline' und keySplines verwendet werden. Eine übergeordnete Gruppe wird mit values animateMotion linear animiert, um eine simple Zeitachse zum Vergleich zu erhalten.
Die resultierenden Trajektorien werden während ihrer aktiven Dauer als graue Pfade angezeigt. Diese Pfade verdecken immer die rote Füllung des Kreises komplett.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Der Zeitablauf der animateMotion wird in solch einer Art gewählt, dass die keySplines direkt mit einem kubischen Pfad als Trajektorie korrespondieren. Die keySplines müssen nur mit den entsprechenden Pfaddaten multipliziert und mit den Werten der Zeitachse kombiniert werden, um den neuen Pfad zu erhalten.

lineare animateMotion

lineare animateMotion
Quadrate werden mit animateMotion und calcMode 'linear' bewegt. Drei einfache Bewegungen werden auf ein blaues Quadrat angewendet. Dies verdeckt komplett die roten Quadrate mit komplizierteren animateMotion. Dunkelrot verwendet das Element mpath, hellrot das Attribute path und rot das Attribut values. Der Pfad besteht aus drei einfachen Linien als Unterpfaden, welcher grau gekennzeichnet ist. Außer dem anfänglichen M-Kommando tragen die anderen M-Kommandos nicht zum Zeitablauf der linearen Animation bei. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Beispiele

Das Sonnensystem

Das Sonnensystem

Vereinfachte Darstellung unseres Sonnensystems mit Sonne (gelb), acht Planeten (weiß) und den Zwergplaneten (rot) Pluto, Eris, Makemake, Haumea und Ceres und einigen Kleinplaneten (magenta): Vesta, Pallas, Hygiea, Sedna, Orcus, Quaoar, Varuna, Ixion, Buffy_2004_XR190 (Buffy ist nur ein Spitzname) und zwei weitere bislang unbenannte. Man beachte, es gibt größere Monde im System als die Zwergplaneten und Ganymed vom Jupiter und Titan vom Saturn sind sogar größer als der Planet Merkur, aber die Umlaufbahn eines Mondes ist typisch unterhalb der Größe eines Pixels welches den jeweiligen Planeten repräsentiert, siehe unten: Näherungen.

Eine Animationszeit von 10 Sekunden repräsentiert ein Jahr. Eine Astronomischen Einheit (AU) entspricht bei der Ausgangsvergrößerung 10 Pixeln. Einige weit draußen liegende Umlaufbahnen und Objekte (besonders Sedna) sind erst zu erkennen, wenn der Maßstab verkleinert wird. Skalieren geht mit den Knöpfen rechts.

Näherungen:
1) Für jeden Planeten ist die Bewegung unabhängig ohne eine Wechselwirkung mit anderen Planeten.
2) Die Animation für jedes Objekt beginnt im Periapsis, daher bezieht sich die Animation nicht auf eine bestimmte Zeit des kompletten Systems.
3) Die Durchmesser von Sonne und Planeten werden typisch größer dargestellt als sie sind (sonst wären sie nicht sichtbar).
4) Eine Projektion auf die Ebene der Erdbahn wird dargestellt, weil die Umlaufbahnen unterschiedliche Inklinationen haben.
5) Die Bewegung der Objekte wird mit einfachen großen Wertelisten für Ort und Zeit genähert, nicht mit elliptischen Bögen oder stetig differenzierbaren Kurven und Geschwindigkeiten, durch die vielen Punkte der Wertelisten wird das aber gut ausgeglichen. Eine Alternative bei etwa gleicher Dateigröße wäre mit weniger Punkten und kubischen Kurven auch möglich, aber auch aufwendiger zu berechnen, ohne ein sichtbar deutlich besseres Ergebnis zu erzielen.

Beim Drüberfahren mit der Maus oder einer Aktivierung eines Objektes werden zusätzliche Informationen angezeigt. Die Anzeige kann wieder mit einem weiteren Klick oder einer Aktivierung der Anzeige entfernt werden.

Sonne, Planet, Mond

Ein System mit Sonne, Planet, Mond wird animiert

Näherung unabhängiger Bewegung von Sonne, Planet und Mond. Die Parameter sind aus der Luft gegriffen. Als Phantasiehintergrund sind einige Sterne und Pulsare angedeutet.

Natürlich sind für die üblichen Verhältnisse die Durchmesser der Objekte viel zu groß dargestellt, zudem sind Planet und Mond relativ zur Sonne sehr schwer gewählt, um einen deutlichen Effekt der Bewegung relativ zueinander zu erzielen. Allerdings sind die meisten Planeten, die bislang außerhalb unseres Sonnensystems gefunden werden, wirklich relativ schwer, was daran liegt, dass solche schweren Planeten leichter zu entdecken sind.

Die Bewegung von Planet und Mond relativ zueinander einerseits und dieses Systems relativ zur Sonne wird jeweils näherungsweise als Zweikörperproblem behandelt, so dass hier auch Stabilitätsprobleme nicht näher untersucht wurden. Für Zweikörperprobleme mit Gravitationswechselwirkung gibt es in der klassischen Mechanik analytische Lösungen, nach denen die Bewegungen bestimmt wurden. Notiert werden wie im vorherigen Beispiel Listen für values und keyTimes. Eine bessere Näherung ist mit entsprechend mehr Aufwand möglich, führt aber zu keiner nennenswerten Änderung der mit dem Auge wahrnehmbaren Bewegung.

Lunarzentrisches Weltbild

Lunarzentrisches Weltbild

Näherung unabhängiger Bewegung von Sonne, Planet und Mond. Es handelt sich um eine lunarzentrische Darstellung, der Mond ist also in der Mitte mittels zeitabhängiger Transformationen fixiert. Die Parameter des Systems sind aus der Luft gegriffen. Als Phantasiehintergrund sind einige Sterne und Pulsare angedeutet.

Das Beispiel ist ähnlich berechnet wie das vorherige. Es zeigt allerdings auch deutlich sehr hilfreiche Tricks aus der Mathematik und Physik, welche auch bei Animationen sehr hilfreich sein können. Ein Problem wird in mehrere einzelne Probleme zerlegt, die getrennt voneinander gelöst werden. Gelöst wird ein Problem in einem Koordinatensystem, in dem die Betrachtung einfach ist. Nach der Lösung erfolgt eine Transformation zurück ins gewünschte darzustellende System. Zudem ist es meist hilfreich, kompliziertere Probleme in Koordinaten zu betrachten, die voneinander separiert sind, sofern das möglich ist, die sich also unabhängig voneinander verhalten. Bei Animationen heißt das, solche Koordinaten möglichst einzeln zu animieren. Damit ist es hier möglich, einen ziemlich komplizierten Bewegungsablauf durch eine Kombination mehrerer einfacher periodischer Bewegungen darzustellen. Damit ist die Dauer der Animation nicht mehr begrenzt durch die Dateigröße, was bei nicht periodischen Bewegungen zwangsläufig der Fall ist.

Optischer Stoß

Optischer Stoß

Vereinfachte Darstellung eines optischen Stoßes.

In der Animation ist ein optischer Stoß des Stoßpaares Na+Ne im Schwerpunktsystem dargestellt. Es wird ein klassisches Modell mit einer Trajektorie (Bahnkurve, cyan) für den Abstandsvektor der beiden Atome voneinander verwendet. Der Stoß lässt sich nun so beschreiben, dass das Neon-Atom (grün) an einem Punkt festgehalten wird und das Natrium-Atom im Grundzustand (blau) von links einläuft. Mit einem Laser, der senkrecht zur Zeichenebene eingestrahlt wird, wird Licht angeboten, welches weder für Natrium noch für Neon alleine resonant ist, jedoch in der Nähe des Überganges des Natriums vom Grundzustand in den ersten angeregten Zustand liegt. Bei kleinen Abständen des Natriums zum Neon ändert sich durch die Wechselwirkung der Atome untereinander die Resonanzenergie des Stoßpaares. Bei einem bestimmten Abstand der Atome ist die Resonanzbedingung erfüllt. Dieser Abstand wird Condonradius genannt. Abstände mit dem Condonradius sind als gelber Kreis dargestellt. Der Schnittpunkt der Trajektorie mit dem Kreis mit dem Condonradius ergibt den Ort der möglichen Anregung. Das Natrium kann also während des Stoßes angeregt werden. Im Gegensatz zum kugelsymmetrischen Grundzustand hat der angeregte Zustand eine andere Form, welche ausgerichtet ist. Ausrichtung und Form können direkt gemessen werden (Messpunkte, schwarze Sterne; Polarisationsabhängigkeit des Übergangsdipolmomentes). Im dargestellten Beispiel steht der angeregte Zustand in Richtung der Kernverbindungsachse - Ausrichtung und Kernverbindungsachse für den Moment der Anregung sind direkt aus den Meßpunkten zu entnehmen. Nach der Anregung läuft das Natrium-Atom nach rechts aus (rot bis magenta). Die Ausrichtung des angeregten Zustandes dreht sich bei kleinen Abständen noch weiter mit in Richtung der Kernverbindungsachse, bleibt dann aber stehen. Die Zeitentwicklung des Zustandes nach der Anregung führt außerdem zu einer Veränderung seiner Form.

Der dargestellte Kasten hat eine Kantenlänge von 20 Bohrschen Radien oder etwas mehr als einem Nanometer. Die Relativgeschwindigkeit der beiden Atome ist etwa 1200 m/s. Der Bereich wird also etwa in einer Pikosekunde durchquert.

Aktivieren oder anklickern des Logos unten zeigt den Moment der Anregung 20s als unbewegtes Bild.

Bahnhofsuhr

Diese Bahnhofsuhr zeigt die aktuelle Uhrzeit, wenn 'wallclock' unterstützt wird

Die Zeiger der Uhr werden mittels animateTransform gedreht. Gestartet wird die Animation der Zeiger mittels begin="wallclock(00:00)", also jeweils um 0 Uhr lokaler Zeit, so dass zum Zeitpunkt des Betrachtens die aktuelle Zeit dargestellt wird.

Während der Stundenzeiger sich kontinuierlich und gleichmäßig dreht, ist die Bewegung des Minutenzeigers diskret und kumulativ (Verwendung von accumulate="sum"). Beim Sekundenzeiger werden gar keyTimes und keySplines verwendet, um eine ungleichmäßige, kontinuierliche Bewegung herbeizuführen. Interessanterweise sind die keyTimes so gewählt, dass die Uhr meist falsch geht und dies erst wieder korrigiert, wenn sie bei der Vollendung einer Minute einen Moment abwartet (das hängt mit der Synchronisationsmethode bestimmter historischer Bahnhofsuhren zusammen, die zur vollen Minute von einer Zentraluhr synchronisiert wurden).

Stellbare Analoguhr

Stellbare Analoguhr

Eine einfache Uhr wird animiert. Anders als bei der vorherigen Uhr muss diese vom Nutzer gestellt werden. Das ist bei einer gleichmäßig laufenden Uhr mit deklarativer Animation recht einfach möglich; das Stellen erfolgt durch zusätzliche, interaktiv gesteuerte Animationen, mit denen sich die Zeiger im richtigen Verhältnis zueinander, insgesamt aber schneller laufen als die Uhr im Normalbetrieb.

Die Uhr wird mittels der der Knöpfe S (schnell), N (normal), L (langsam) gestellt, starten geht mit mousedown, stoppen mit mouseup. Mit dem Startknopf wird die normale Uhr gestartet.

Modell des Sockels der Trajanssäule (in Rom)

Modell des Sockels der Trajanssäule (in Rom); interaktiv

Verschiedene Segmente des Sockels können durch anklickern verschoben werden. Dazu wird animateMotion verwendet. Zusätzlich werden durch das Anklickern auch Teile der Segmente (als Umrisse) per set erst sichtbar gemacht. Für die Animation mit animateMotion werden für den Zeitablauf keyTimes verwendet und das Vor und Zurück wird durch eine nicht monotone Liste von keyPoints erreicht.

Karte: Osmanisches Reich 1300-1923

Karte: Osmanisches Reich 1300-1923

Als Beispiel für eine interaktive historische Karte sei das Osmanische Reich betrachtet. Die Karte gibt einen Überblick der zugehörgen Gebiete von 1300 bis 1923. Zum einen können die anzuzueigenden Jahre in einem Menü ausgewählt und angeklickert werden, zum anderen ist auch eine durchlaufende Animation der Gebiete nacheinander anwählbar. Zudem kann der Strich der Gebiete ein- und ausgeschaltet werden.

Kann ein Darstellungsprogramm Animationen nicht umsetzen, sind Strich und Füllung aller Jahre sichtbar und die Füllung teiltransparent überlagert.

Als Vorlage wurde eine bereits verfügbare GIF-Animation verwendet. Die Vorteile der interaktiven Karte mit SVG liegen darin, dass sie leicht mit einem Texteditor an andere Sprachen anzupassen ist. Hier wurden im Menü gleich mehrere Sprachen zur alternativen Anzeige bereitgestellt, die allgemeine Beschreibung ist in Deutsch und Englisch verfügbar – andere Sprachen sind im Bedarfsfalle leicht zu ergänzen. Auch die Animationen sind bei Bedarf leicht anpassbar.

Die Vorteile für den Betrachter liegen in der freien Skalierbarkeit der Karte und dem freien Zugriff auf die Gebiete der Einzeljahre sowie der Möglichkeit des Vergleiches. Durch die Interaktion ist die Beschäftigung des Betrachters mit dem Thema zudem intensiver, es wird sozusagen besser begreiflich als eine schlichte durchlaufende GIF-Animation, welche nur passiv ohne Eingriffsmöglichkeit rezipiert werden kann.

Auch die Historie der GIF-Animation ist dramatisch. Die eigentlich zugrundeliegende Länderkarte war bereits SVG, ist dann aber offenbar nach JPEG/JFIF konvertiert worden, um die historischen Gebiete zu ergänzen. Von vornherein bei SVG zu bleiben, wäre hier zweifellos die bessere Wahl gewesen. Selbst die Verwendung von PNG statt JPEG/JFIF bei der Bearbeitung hätte geholfen, eigenartige Artefakte zu vermeiden, die im GIF noch auszumachen sind. Diese letztlich unnötigen Formatkonversionen führen dann auch zu Genauigkeitseinbußen. Allerdings wird für das eigentliche Thema keine sehr hohe Präzision benötigt, so dass die Genauigkeit der interaktiven SVG-Karte immer noch gut genug für den Zweck sein sollte.

Abrollen eines Rades

Abrollen auf einer ebenen Unterlage

Um das Abrollen eines Kreises oder Rades auf einem Weg darzustellen (dessen Krümmungsradius überall kleiner als der Radius des Kreises ist, kann man recht einfach zwei Bewegungen überlagern, einmal die Drehung des Rades um die eigene Achse und dann die Bewegung entlang des Weges. Ist r der Radius des Rades zum Berühungspunkt mit dem Weg, so ist der Umfang U = 2 π r. Die Zeit für eine komplette Drehung muß nun genauso groß wie die Translation um U entlang des Weges sein, damit der Eindruck des Abrollens entsteht.

Ist der Weg gerade, so ist dies recht einfach zu realisieren, wie im ersten Beispiel zu sehen. Bei diesem wird einfach eine by-Animation für die Translation verwendet, wobei als Wert der dreifache Umfang des Kreises verwendet wird und auch die dreifache Animationsdauer. Die Animation wird wiederholt. Durch eine negative Anfangszeit startet das Rad im sichtbaren Bereich.

Abrollen in und auf einem Kreis

Rollt das Rad in oder auf einem Kreis ab, so ist dies offenbar rein mit Drehungen realisierbar, wobei das Verhältnis der Radien die Animationsdauern bestimmt. Je nachdem, ob das Rad innen oder außen rollt, ändert sich auch das Vorzeichen der Drehung des Rades relativ zur Richtung der Rolldrehung. Die beiden Räder rollen gegenläufig um, eines innen, eines außen.

Abrollen entlang eines Pfades

Auch das Abrollen entlang eines beliebigen Pfades ist möglich. Zu dem Zwecke wird dann zum einen 'animateMotion' verwendet, zum anderen sollte die Länge des Pfades bekannt sein, um die Animationsdauer für die Bewegung entlang des Pfades relativ zur Drehung des Rades korrekt angeben zu können. Man kann die Länge des Pfades relativ einfach und genau schätzen, indem man sich mit stroke-dasharray einen Maßstab bastelt.

Über das Verhältnis der Pfadlänge zum Radumfang ergibt sich dann wieder das Verhältnis der Animationsdauern. Die Laufrichtung wird natürlich durch den gewählten Pfad bestimmt. Auf welcher Seite das Rad rollt, bestimmt sich durch rotate 'auto' oder 'auto-reverse'.

Bei der Bestimmung des Kreisumfanges ist wie gesagt der Radius vom Kreismittelpunkt zum Pfad relevant. Punkte außerhalb des Radius führen dann gegebenenfalls eine rückläufige Schleife aus. Ganz praktisch kommt das etwa bei Eisenbahnrädern vor, die auf Schienen laufen.

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |