Beispiele und Tests zur Animation mit SVG

Animationselemente

Element animate

Beispiele für den Gebrauch des Elementes animate gibt es bereits reichlich für viele Anwendungen in den anderen Bereichen. Alle Datentypen außer frequency, time und transform-list können mit animate animiert werden. Für den Datentyp color wird typisch animateColor bevorzugt, kann aber auch mit animate animiert werden. animateColor ist eingeschränkt auf Farbwerte, mit animate können alle Malwerte verwendet werden.

e2005-09-12-07: §Q
Farbanimation mit animate:
animate-Animation der Eigenschaften fill und stroke. fill von verschiedenen Formen einer Gruppe ändert sich innerhalb von 10s von gelb nach blau. stroke ändert sich von hellgrün zu dunkelmagenta.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko Animation unvollständig
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

Dies ist nicht SVG-tiny 1.1, aber SVG 1.1:
e2005-09-12-08: §UQ
Zufallsanimation verschiedener Attribute eines Pfades oder
Zufallsanimation verschiedener Attribute eines Pfades :
d, stroke-width, stroke-opacity, stroke und fill eines gleichseitigen Polygons werden animiert. Ein PHP-Skript erzeugt verschiedene Zufallsparameter. Ein Klick auf den Pfad startet das PHP-Skript mit einem anderen Pfad.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

Sehr einfache animate-Animationen können mit KSVG funktionieren, dies ist bereits in anderen Beispielen gezeigt worden.

Element set

Beispiele für den Gebrauch des Elementes set gibt es bereits reichlich für viele Anwendungen in den anderen Bereichen. Alle Datentypen können mit set animiert werden mit Ausnahme von frequency, time und transform-list.

e2007-09-30-01: §M(1)P
vergleiche set und animate:
set und animate mit einem Wert und additive replace und accumulate none sind äquivalent. Dies wird hier mit animierten Kreisen getestet. Die Testdauer ist etwa 8s mit drei Sprüngen in x-Richtung. Dunkelrot oder rot weist auf einen Fehler hin.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko dur bei set ignoriert?
WebKit 528.16ko rote Vergleichsanimation falsch
Adobeok -
Squiggle 1.7ko falsche Fehlermeldungen
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-09-12-09: §QI
set-Animation startet animate-Animation:
Mit einem Klick auf einen Kreis wird das Attribut xlink:href des Elementes a, welches den Kreis umgibt, mit einer set-Animation ausgetauscht. Der Beginn dieser set-Animation startet eine animate-Animation, welche vom Inhalt des Attributes xlink:href abhängt: Erster Klick - horizontale Bewegung. Zweiter Klick - vertikale Bewegung. Dritter Klick - ändert die Größe des Kreises. Man beachte, daß die Aktivierung mit dem Verweis die Startzeit definiert, daher ermöglichen spätere Aktivierungen einen Zugang zur Geschichte der Animation mit der letzten aufgelösten Startzeit für alle Elemente.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko animiert ohne Interaktion
WebKit 528.16ko sucht nicht rückwärts beim vierten Klick
Adobeok -
Squiggle 1.7ko falscher Zeitablauf bei Wiederholung
Opera8.02/50ko keine Animation
Opera9tp1ko kein set von xlink:href
Opera9tp2/ beta1/2/ 9.00/9.10ko falscher Zeitablauf der Historie
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0ko keine Interaktivität
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-10: §P
die Füllfarbe wird mit dem URI-Fragment-Identifizierer #yellow gesetzt:
die Füllfarbe wird mit dem URI-Fragment-Identifizierer #blue gesetzt:
die Füllfarbe wird mit dem URI-Fragment-Identifizierer #green gesetzt:
Mit einem URI-Fragment-Identifizierer wird die Farbe des Kreises festgelegt. Verfügbare Identifizierer: #yellow, #blue, #green (gelb, blau, grün).

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko immer grün
KSVG1ko keine Animation
WebKit 528.16ko keine Animation
Adobeko keine Animation
Squiggle 1.7ko keine Animation
Opera8.02/50ko keine Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko keine Animation
Gecko 2.0/ 8.0/ 12.0ko keine Interaktivität
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-11: §PI
Füllfarbe mit einem Klick auf den entsprechenden Kreis setzen:
Mit einem Klick auf einen der kleinen Kreise oben wird die Farbe des großen Kreises gesetzt. Zu beachten ist, daß 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko immer grün
KSVG1ko keine Interaktion
WebKit 528.16ko falsche Farben nach der ersten Runde
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9tp2/ beta1/2/ 9.00/9.10ko keine Historie, manchmal funktionieren nicht alle Klicks
Gecko 2.0/ 8.0/ 12.0ko keine Interaktivität
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-12: §IQ
set und animate interaktiv kombiniert:
Der Beginn der Animation wird mit einem Klick auf den Kreis gestartet. Die nächsten Klicks bewegen den Kreis ein wenig weiter. Wenn der Kreis das letzte Mal angeklickert wird, bevor er sich ganz aus der viewBox hinausbewegt, wird die ganze Kaskade der Bewegungen wiederholt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Interaktivität
KSVG1ko keine Interaktion
WebKit 528.16ko nicht wiederholt
Adobekoinstabil, einige Klicks ignoriert
Squiggle 1.7kounterliegender anfänglicher Wert ignoriert
Opera8.02/50kokeine Animation
Opera9tp1ko xlink:href nicht animiert, accumulate ignoriert
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok (in 9.50 alpha/beta/ 9.52 störende Reste der 'Fokusbox')
Gecko 2.0/ 8.0/ 12.0ko keine Interaktivität
Gecko 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG-tiny 1.1, aber SVG 1.1 oder SVG basic 1.1
e2006-07-12-01: §IQA
set, begin und end mit Ereignissen:
Farbe, Opazität, Anzeige oder Sichtbarkeit mit verschiedenen Ereignissen modifizieren, wie im entsprechenden Element title angegeben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Interaktivität
KSVG1ko keine Interaktion
WebKit 528.16ko einige Ereignisse werden ignoriert, wenn sie auf das Attribute end angewendet werden.
Adobekoeinige Ereignisse werden ignoriert, wenn sie auf das Attribute end angewendet werden.
Squiggle 1.7kounten links verschwindet für immer, unten rechts funktioniert nur einmal
Opera8.02/50kodie meisten Ereignisse ignoriert, stürzt bei einigen Ereignissen ab, falls auf das Attribut angewendet
Opera9tp1/ beta1/2ko Endereignisse in tp1 ignoriert, alle Ereignisse in den betas ignoriert
Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok (Kreis rechts unten instabil)
Opera11.60ko unten rechts keine Funktion
Opera12,00ko einige Ereignisse ignoriert
Gecko 2.0/ 8.0ko unten rechts bleibt es sichtbar nach Klick und Bewegung
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität
Testergebnisse für set
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 0/6
KSVG1 0/5 0/6
WebKit 528.16 0/5 1/6
Adobe 3/5 3/6
Squiggle 1.7 1/5 1/6
Opera8.02/50/ 9tp1 2/5 2/6
Opera9 beta1/2 3/5 3/6
Opera9tp2/ 9.00/9.10 3/5 4/6
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 4/5 5/6
Opera11.60/ 12,00 4/5 4/6
Gecko 2.0/ 8.0/ 12.0 1/5 1/6
Gecko 24.0/ 36.0/ 48.0 4/5 5/6

animateTransform

Beispiele für den Gebrauch des Elementes animateTransform gibt es bereits reichlich für viele Anwendungen in den anderen Bereichen, besonders im Bereich des transform-Attributes. Der Datentyp transform-list kann mit animateTransform animiert werden.

e2006-02-11-02: §M(1)P
vergleiche animate und animateTransform:
Ein Kreis bewegt sich mittels animateTransform von links nach rechts. Diese Animation wird von einer einfachen from to animation von oben nach unten überlagert. Der sichtbare Effekt ist eine Bewegung entlang des gegebenen grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG-tiny 1.1, aber SVG 1.1 oder SVG basic 1.1
e2005-09-24-01: §Q
animateTransform eines SVG-Dokumentes:
animateTransform des Elementes image, welches ein SVG-Dokument referenziert. Ein zentriertes Bild wird mit verschiedenen Werten additiv und mit verschiedenen Dauern transformiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51ko referenziertes SVG animiert, aber keine Transformation
Amaya11.3.1kokeine Animation
KSVG1ko keine Animation, keine Transformation
WebKit 528.16ko nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war.
Adobeko nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war.
Squiggle 1.7ko nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war.
Opera8.02/50ko keine Anzeige
Opera9tp1/2/ beta1/2/ 9.00/9.10ko Animation ok, aber statt des SVG wird ein kariertes Muster angezeigt.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koviele Störungen in alpha, das SVG-Dokument animiert nicht
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko das SVG-Dokument animiert nicht

from-to

e2005-09-23-02: §Q
animateTransform zurückverwandeln und spiegeln:
Ein Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Die Transformation wird mit einer diskreten Animation nach 3s rückgängig gemacht und innerhalb von weiteren 10s wird das Resultat gespiegelt. Das bedeutet, das transformierte Quadrat und der Text werden wieder in ein untransformiertes Quadrat zurückverwandelt und anschließend innerhalb von 10s komplett gespiegelt. matrix selbst ist nicht animierbar, da es in diesem Beispiel kein additive-Attribut gibt, muß es nur einfach überschrieben werden.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16(ok) manchmal bei Nullskalierung eingefroren
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok (Text in tp2 ein wenig instabil)
Gecko 2.0/ 8.0/ 12.0fail text-Animation gestört
Gecko 24.0/ 36.0/ 48.0ok -

from-by

e2005-09-23-03: §Q
animateTransform auf Null schrumpfen:
Ein Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Nach 3s wird eine animateTransform mit einer Skalierung von 1,1 nach -1,-0.5 angewendet mit dem Wert sum für das additive-Attribut. Das bedeutet, nach 3s schrumpft das Quadrat in x-Richtung auf 0 und wird unsichtbar. matrix selbst ist nicht animierbar, da in diesem Beispiel der Wert des additive-Attributes sum ist, ist die mit matrix transformierte Form der Ausgangswert der Animation.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16fail Text gestört und ein Rest des Textes verschwindet nicht
Adobeko ein Rest der Form verschwindet nicht
Adobeko diskrete und falsch Animation
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok (Text in tp2 ein wenig instabil)
Gecko 2.0/ 8.0/ 12.0fail text-Animation gestört
Gecko 24.0/ 36.0/ 48.0ok -

by

e2006-05-14-03: §M(1)P
animateTransform und by:
Ein blaues Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Nach 3s wird eine animateTransform mit einer Saklierung um 0.5,-2 und einer Dauer von 10s und linearem calcMode hinzugefügt. Das bedeutet, nach 3s wird die Form skaliert und kontinuierlich zu einer gescherten Formen hin verwandelt. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16fail eingefroren/abgestürzt
Adobeok-
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko keine Anzeige oder Animation
Opera9tp2/ beta1/2/ 9.00/9.10ko in 9tp2 ist der Text instabil, ignoriert Anfangstransformation. bug-212139
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0fail text-Animation gestört
Gecko 24.0/ 36.0/ 48.0ok -

e2006-05-13-01: §M(1)P
by und animateTransform:
Ein blauer Kreis wird in 5s von rechts nach links bewegt, wobei animateTransform und das Attribut by verwendet werden. Weil für by die Animation additiv ist, wird die anfängliche Transformation nicht überschrieben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1fail kein animateTransform
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail keine Anzeige des blauen Kreises
Opera9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9tp2/ beta1/2/ 9.00/9.10ko nicht additiv
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

to

e2005-09-23-01: §Q
animateTransform umschalten auf keine Transformation:
Ein Quadrat ist mit einer Matrix transformiert worden. Die Transformation wird mit einer diskreten Animation nach 3s rückgängig gemacht. Das bedeutet, das transformierte Quadrat wird wieder in ein untransformiertes Quadrat zurückverwandelt. matrix selbst ist nicht animierbar, da es in diesem Beispiel kein additive-Attribut gibt, muß es nur einfach überschrieben werden.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko keine Animation
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko keine Animation
Gecko 2.0ok -
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko keine Animation

e2005-09-23-04: §M(1)P
animateTransform und das to-Attribut:
Ein blaues Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Nach 3s wird eine animateTransform mit Dauer von 10s und einer Skalierung von -1,1 angewendet, wobei calcMode linear angegeben ist. Das bedeutet, nach 3s wandelt sich das Quadrat kontinuierlich in ein gespiegeltes Quadrat. matrix selbst ist nicht animierbar, aber in diesem Beispiel ist es der Ausgangswert der Animation. Wenn etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation, manchmal eingefroren
Adobeko keine lineare Animation
Squiggle 1.7ko keine Animation, falsche Fehlermeldung, falsche stroke-width!
Opera8.02/50ko Formen verschwinden
Opera9tp1/2/ beta1/2/ 9.00/9.10kokeine lineare Animation. bug-212137
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Animation

e2005-09-23-05: §M(1)P
animateTransform und to-Attribute:
Ein blaues Quadrat und ein Testtext sind als Ausgangsformen mit einer Skalierung von 1.5,1.5 gegeben . Nach 3s wird eine animateTransform mit einer Saklierung auf -1,1 und einer Dauer von 10s und linearem calcMode ausgeführt. Das bedeutet, nach 3s wird die Skalierung kontinuierlich zu den gespiegelten Formen hin ausgeführt. Wenn etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko keine lineare Animation
Squiggle 1.7ko falsche stroke-width!
Opera8.02/50ko Formen verschwinden
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keine lineare Animation. bug-212137
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0fail text-Animation gestört
Gecko 24.0/ 36.0/ 48.0ok -

e2006-06-03-01: §M(1)P
animateTransform und eingefrorene to-Animation:
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen vom Typ animateTransform 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. Beachte, daß 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko kein AnimateTransform
WebKit 528.16ko falsche Animation
Adobeko erste animateTransform ignoriert
Squiggle 1.7ko falsche Animation
Opera8.02/50ko keine Animation
Opera9tp1ko die zweite Runde zeigt falsches Verhalten für eine eingefrorene to-Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Animation
Gecko 2.0/ 8.0/ 12.0ok -
Gecko 24.0/ 36.0/ 48.0ko falsche Animation

e2006-06-03-02: §M(1)P
animateTransform und to-Animation:
Zwei blaue Kreise werden zur einer Position bewegt, die mit einem grauen Kreis markiert ist. Dazu wird animateTransform mit für eine Translation zum absoluten Endwert verwendet.
Zwei rote Kreise werden als einfache Referenz nur zum Vergleich animiert. Wenn die roten Kreise sichtbar werden, ist die Animation der blauen Kreise falsch. Beachte, daß to-Animationen ein spezielles additives Verhalten haben, welches im Detail in der SMIL Empfehlung definiert ist.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko kein AnimateTransform
WebKit 528.16ko falsche Animation
Adobeko Animation diskret, nicht linear
Squiggle 1.7ko falsche Animation
Opera8.02/50ko blaue Kreise verschwinden
Opera9tp1ko kleiner Kreis falsch animiert
Opera9tp1/2/ beta1/2/ 9.00/9.10ko falsche Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

keySplines

e2007-06-11-11: §M(1)P
animateTransform, keySplines:
Fortgeschrittener Test für calcMode spline, keySplines mit from-to. from-by oder values animateTransform.
Ein blau geränderter Kreis wird mit sechs verschiedenen animateTransform bewegt, wobei calcMode spline und keySplines verwendet werden. Eine übergeordnete Gruppe wird mit values animateTransform 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 animateTransform wird in solch einer Art gewählt, daß 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16kokeySplines ignoriert für from-to, from-by
Adobeko keySplines ignoriert für from-to, from-by
Squiggle 1.7ko from-by Animation ignoriert, Genauikgkeit für die anderen könnte besser sein.
Opera8.02/50ko keine keySpline-Animation
Opera9tp1/2/ beta1ko keySplines ignoriert für from-to, from-by
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koschlechte Interpolation
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0ko kein blauer Kreis

additive und accumulate

SMIL spezifiziert, daß from-to-, from-by- und by- Animationen die gleichen sein müssen wie die entsprechenden values-Animationen.
Die Konversion findet wie folgt statt:

from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"

by- und from-by-Animationen haben nur eine Bedeutung, wenn Werte irgendwie addiert werden können. '0' wird als allgemeines Symbol für das neutrale Element der Addition des entsprechenden Attributes verwendet, was bedeutet 0 + a = a + 0 = a. Und '0' ist nicht gleich dem Symbol '1' als die Basiseinheit des entsprechenden Attributes, '0' ist der Vorgänger von '1' im entsprechenden Attributraum.
Abweichend von SMIL spezifiziert SVG, daß für animateTransform der Animationseffekt hinten an den darunterliegenden Wert multipliziert wird, falls die Animation additiv ist.

Für animateTransform '0' ist das Gleiche wie die Nullmatrix, nicht die Einheits- oder Identitätsmatrix.
Für den Typ translate ist dies eine Translation in Koordinaten: 0,0.
Für die Typen skewX oder skewY ist dies eine Scherung mit einem Winkel 0.
Für zwei additive Scherwinkel a, b ist der resultierende Winkel nicht a+b und nicht (tan(a)+tan(b)).
Für den Typ scale ist dies eine Skalierung von 0,0, dies bedeutet keine Anzeige, falls nicht zu einem anderen Wert hinzuaddiert.
Für den Typ rotate ist dies eine Drehung um den Winkel 0 um 0,0.

e2007-06-18-01: §M(1)P
animateTransform translate:
Vergleiche from-to-, from-by- und by-animateTransform translate mit values-animateTransform und animateMotion
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs translate und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none für animateMotion verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10ko additive replace nicht ignoriert für by-Animationen
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Endwerte

e2007-06-18-02: §M(1)P
animateTransform skewX:
Vergleiche from-to-, from-by- und by-animateTransform skewX mit values-animateTransform
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs skewX und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko additive replace nicht ignoriert für by-Animationen
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Zwischen- und Endwerte

e2007-06-18-03: §M(1)P
animateTransform skewY:
Vergleiche from-to-, from-by- und by-animateTransform skewY mit values-animateTransform
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs skewY und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10ko additive replace nicht ignoriert für by-Animationen
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Zwischen- und Endwerte

e2007-06-18-04: §M(1)P
animateTransform scale:
Vergleiche from-to-, from-by- und by-animateTransform scale mit values-animateTransform
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs scale und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche oder keine Animation
Opera9tp2/ beta1/2/ 9.00/9.10ko Animation kompletter Unfug
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Zwischen- und Endwerte

e2007-06-18-05: §M(1)P
animateTransform rotate (um 0):
Vergleiche from-to-, from-by- und by-animateTransform rotate mit values-animateTransform
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs rotate und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10koadditive replace nicht ignoriert für by-Animationen
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Zwischen- und Endwerte

e2007-06-18-06: §M(1)P
animateTransform rotate:
Vergleiche from-to-, from-by- und by-animateTransform rotate mit values-animateTransform
from-to, from-by und by werden für verschiedene blau gerandete Pfade angewendet auf animateTransform des Typs rotate und verglichen mit values-Animationen einschließlich des additiven und kumulativen Verhaltens des unterliegenden roten Pfades. Zusätzlich unterliegende dunkelrote Pfade simulieren das gleiche Verhalten, wobei immer die Vorgaben additive replace und accumulate none verwendet werden. Die blauen Pfade verdecken alle roten Pfade. Daher ist der Test fehlgeschlagen, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Falsche Interpretation von kumulativen from-by-Animationen
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10koadditive replace nicht ignoriert für by-Animationen und falsche kumulative Animationen
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Zwischen- und Endwerte

e2006-05-14-01: §M(2)P
animateTransform, from, to, replace:
Ein blaues Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Nach 3s wird eine animateTransform mit einer Skalierung von 1.5,1.5 auf -1,1 und einer Dauer von 10s und linearem calcMode ausgeführt. Das bedeutet, bei 3s wird die Transformation ersetzt, verwandelt sich dann zu den gespiegelten Formen hin. Anfangs- und Endwerte der Animation des Rechtecks sind in grau angegeben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko Animationsbeginn etwas zu klein
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok in 9tp2 ist der Text instabil
Gecko 2.0/ 8.0/ 12.0fail text-Animation gestört
Gecko 24.0/ 36.0/ 48.0ok -

e2006-05-14-02: §M(2)P
animateTransform, from, to, replace:
Ein blaues Quadrat und ein Testtext sind mit einer Matrix transformiert worden. Nach 3s wird eine animateTransform mit einer Saklierung von 1.2,1.2 auf 1.5,-1.5 und einer Dauer von 10s und linearem calcMode hinzugefügt. Das bedeutet, nach 3s wird vom Faktor 1.2 zum Faktor 1.5 skaliert und kontinuierlich zu den gespiegelten Formen hin verwandelt. Anfangs- und Endwerte der Animation des Rechtecks sind in grau angegeben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok in 9tp2 ist der Text instabil
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für animateTransform
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/19 0/20
KSVG1 0/19 0/20
WebKit 528.16 5/19 5/20
Adobe 6/19 6/20
Squiggle 1.7 7/19 7/20
Opera8.02/50 6/19 6/20
Opera9tp1 7/19 7/20
Opera9tp2/beta1/2/ 9.00/9.10 6/19 6/20
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 15/19 15/20
Gecko 2.0 6/19 7/20
Gecko 8.0/ 12.0 5/19 6/20
Gecko 24.0 8/19 9/20
Gecko 36.0/ 48.0 9/19 10/20

KSVG mag es nicht, das Attribut transform ganz allgemein zu animieren.

Man beachte, daß es etwas seltsam ist, daß laut Spezifikation matrix nicht animierbar ist. So oder so kann es der Anfangswert des transform-Attributes sein. Jeder Wert des transform-Attributes kann Ausgangswert einer to- oder by-Animation sein. Das ist für die Darstellungsprogramme deutlich schwieriger als 'from to'- oder 'from by'-Animationen. Um Probleme zu vermeiden, könnte es derzeit besser sein, 'from to', 'from by' oder values zu verwenden, sofern möglich.
Da ferner matrix durch eine Kombination der anderen Transformationen ersetzt werden kann, ist es möglich, den gleichen visuellen Effekt einer animierten matrix zu erhalten, wenn die anderen mit dem Wert sum für das additive-Attribut kombiniert werden.
Um die by-Animationen richtig hinzubekommen, kann eine additive Animation ausgehend von der Einheitsmatrix zu dem Wert angewendet werden, der mit dem by-Attribut plus der Einheitsmatrix gegeben ist. Das hat mit animateTransform den gleichen Effekt, weil dies als multiplikative Operation definiert ist und by-Animationen additiv sind.
Um die to-Animationen richtig hinzubekommen, gibt es ja eine spezielle Regel. Ist C(t) die aktuelle Transformationsmatrix und T der to-Wert der Animation, t die Zeit, d die Animationsdauer, so ergibt sich für das Darstellungsprogramm mit additive replace folgende Transformationsmatrix für eine to-Animation: C(t) + (T - C(t)) t/d.

animateColor

Beispiele für den Gebrauch des Elementes animateColor gibt es bereits reichlich für viele Anwendungen in den anderen Bereichen, besonders im Bereich 'Malen: Füllung, Striche Markierungen'. Die Datentypen color (und eventuell paint) können mit animateColor animiert werden.

e2005-09-15-01: §QU
animateColor:
Pseudorotation mit diskreter Animation von animateColor - ein Kreis scheint um das Zentrum des Bildes zu rotieren. Diese Animation ist den traditionellen rahmenbasierten Animationen ähnlich, wie bei Formaten wie GIF, MNG oder MPEG auftreten. Statt ein Objekt zu bewegen, werden lediglich Einzelbilder eines nach dem anderen kurzzeitig sichtbar gemacht - hier passiert das nur zum Spaß, bei diesen Formaten verursacht das große Dateien, die typische für diese Formate sind.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko hübsche farbfreudige Fehler ;o)
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

values

e2006-08-13-01: §P
animateColor:
Die Eigenschaft fill eines Kreises wird mit folgenden Werten animiert: red;#ffff00;rgb(255,0,255);blue;rgb(0%,50%,70%);currentColor;red. begin ist 2s, dur 10s mit Wiederholung. Der Anfangswert ist none. stroke hat die gleiche Animation, wobei aber nur rgb() mit Prozentangaben genutzt wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko hübsche farbfreudige Fehler ;o)
WebKit 528.16ko currentColor falsch
Adobeko Animation nicht kontinuierlich
Squiggle 1.7ok -
Opera8.02/50ko currentColor falsch
Opera9tp1ko falsche Animation
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2006-08-13-02: §M(2)P
animateColor:
Die Farbe einer Gruppe und fill zweier Kreise als Teil der Gruppe werden animiert. Die Werte für color sind rgb(0,0,255);rgb(100,100,100);rgb(0,0,255) gekennzeichnet durch die Farbe des Hintergrundes. Die Werte für fill des großen zentrierten Kreises sind blue;currentColor;blue. Die Werte für fill des kleinen Kreises sind blue;rgb(100,100,100);blue, aber dieses animateColor nutzt keyTimes und keySplines, um den gleichen sichtbaren Effekt zu erreichen wie animateColor des großen Kreises. Weil sich currentColor die ganze Zeit ändert, ist die Animation von fill eine quadratische und kontinuierliche Änderung insgesamt im blauen Bereich. Ein Fehler ist beispielsweise aufgetreten, falls etwas Rotes sichtbar wird, falls die Animation nicht kontinuierlich ist (die Tatsache ignorierend, daß currentColor immer einen RGB-Wert hat) oder falls der Effekt der Animation von fill nicht sichtbar ist (die Animation von color ignorierend) oder falls die Animation der beiden Kreise nicht den gleichen sichtbaren Effekt hat.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation, falsche Farben
WebKit 528.16ko Animation falsch
Adobeko Animation nicht kontinuierlich
Squiggle 1.7kofalsche Animation
Opera8.02/50/ 9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche oder keine Animation

e2006-08-13-03: §Q
animateColor:
Die Eigenschaft fill eines Kreises wird mit folgenden Systemfarben als Werten animiert: WindowText;Menu;MenuText;InactiveBorder; ActiveBorder;GrayText;Window;HighlightText;Highlight; InfoBackground;InfoText;WindowFrame;WindowText begin ist 2s, dur 20s mit Wiederholung. Der Anfangswert ist none. Das Hintergrundrechteck hat die Farbe AppWorkspace.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko hübsche farbfreudige Fehler ;o)
WebKit 528.16ko einzige Farbe: schwarz
Adobeko einzige Farbe: schwarz
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko unvollständig
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2006-09-05-01: §M(1)P
animateColor:
Die Eigenschaften color und fill eines g-Elementes werden in 10s animiert, von rot nach blau beziehungsweise blau nach rot. Das g-Element beinhaltet ein Rechteck, für welches fill in 10s mit den Werten inherit und currentColor animiert wird. Das fill des zentrierten Kreises simuliert das Verhalten des großen Rechtecks, wobei keyTimes und keySplines genutzt werden, um den gleichen sichtbaren Effekt zu erreichen.
Weil sich fill und currentColor die ganze Zeit ändern, ist die Animation von fill des Rechtecks ein quadratischer und kontinuierlicher Wechsel insgesamt im blauen Bereich (von blau nach magenta und zurück nach blau). Ein Fehler tritt zum Beispiel auf, wenn etwas Rotes sichtbar wird, falls etwas nicht kontinuierlich animiert wird (die Tatsache ignorierend, daß currentColor und inherit immer einen RGB-Wert haben) oder falls der Effekt der Animation von fill nicht sichtbar wird (Die Animation von color ignorierend) oder falls die Animation von Rechteck und Kreis nicht den gleichen Effekt haben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko überraschende farbfreudige Fehler ;o)
WebKit 528.16ko keine Animation des Rechtecks
Adobeko leicht falsche Farben in der Animation
Squiggle 1.7koAnimation komplett falsch
Opera8.02/50ko Animation komplett falsch
Opera9tp1/2 beta1/2/ 9.00/9.10ko falsche Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60ok-
Opera11.00/11.60/ 12,00kofalsche Animation

from-to

e2008-03-12-01: §P
animateColor und from-to-Animation:
Die 16 Farbnamen (welche nicht empfindlich auf Groß- und Kleinschreibung sind) von SVG tiny 1.1 werden in from-to animateColor für fill von 8 Rechtecken verwendet.
The Animationen werden mit entsprechenden animateColor für stroke verglichen, die hexadezimale Zahlen verwenden. Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein stroke, Test selbst ok
KSVG1ok-
WebKit 528.16ok -
Adobeok-
Squiggle 1.7ok-
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

from-by

e2008-03-12-11: §P
animateColor und from-by-Animation:
from-by animateColor wird getestet, wobei einige der 16 Farbnamen (welche nicht empfindlich auf Groß- und Kleinschreibung sind) von SVG tiny 1.1 verwendet werden.
The Animationen werden mit entsprechenden animateColor für stroke verglichen, die hexadezimale Zahlen verwenden.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein fill
KSVG1kofalsche Animation
WebKit 528.16ok -
Adobeok-
Squiggle 1.7ok-
Opera8.02/50ko kein fill
Opera9tp1/2/ beta1ko falsche Animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

e2008-03-12-12: §P
animateColor und from-by-Animation:
Einschränken von Farbanimationen:
Der Präsentationswert muß auf einen zulässigen Wert eingeschränkt werden. Einige der 16 Farbnamen (welche nicht empfindlich auf Groß- und Kleinschreibung sind) von SVG tiny 1.1 werden verwendet, um dies für from-by animateColor zu testen.
The Animationen werden mit entsprechenden animateColor für stroke verglichen, die hexadezimale Zahlen verwenden.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein fill
KSVG1kofalsche Animation
WebKit 528.16ok -
Adobeok-
Squiggle 1.7ok-
Opera8.02/50ko kein fill
Opera9tp1/2/ beta1ko falsche Animation
Opera9beta2/ 9.00/9.10ok-
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00kofalsche Animation

e2008-03-12-13: §P
animateColor und from-by-Animation:
SMIL spezifiziert, daß die Werte der Attribute from/to/by und values negative und Werte außerhalb des erlaubten Bereiches für Farben angeben dürfen. Die durch jedes einzelne animateColor definierte Funktion kann ebenfalls negative oder Werte außerhalb des erlaubten Bereiches enthalten. Die Anwendung muß den resultierenden Präsentationswert korrigieren, damit dieser im angezeigten Zielfarbraum legal ist (freie Übersetzung des Abschnittes in SMIL).
Dies ist möglich besonders für die Prozentnotation, weil dies ohne weitere Einschränkung als Nummer definiert ist, die direkt von einem '%' gefolgt wird. In diesen Tests ist der Präsentationswert immer im legalen Bereich, lediglich die Attributwerte oder individuelle animateColor Zwischenergebnisse können außerhalb des erlaubten Bereiches sein.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein fill
KSVG1kofalsche Animation
WebKit 528.16kofalsche Animation
Adobekofalsche oder keine Animation
Squiggle 1.7kofalsche oder keine Animation
Opera8.02/50ko kein fill
Opera9tp1/2/ beta1ko falsche Animation
Opera9beta2/ 9.00/9.10ko falsche Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko(andere) falsche Animation

by

e2008-03-11-11: §P
animateColor und by-Animation:
Die Eigenschaft fill von Kreisen wird von nahezu schwarz nach nahezu weiß animiert, wobei 14 by-Animationen mit Schritten von 7% entsprechend 17.85 verwendet werden. Diese additiven Animationen werden mit einer einfachen values-Animation für stroke mit demselben Anfangs- und Endwert für den großen Kreis verglichen. Falls es einen Unterschied zwischen stroke und fill oder den beiden Kreisen gibt, deutet dies ein Genauigkeitsproblem an, weil nur der endgültige Präsentationswert gerundet werden darf, nicht jede Animation einzeln. Der Hintergrund gibt den Anfangswert an und wandelt sich zum Endwert, wenn alle Animationen zuende sind.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51ko falsche Animation
Amaya11.3.1ko keine Animation
KSVG1ko falsches animateColor, lustige Farben
WebKit 528.16kofalsche Animation
Adobeko falsches animateColor, Anfangs- und Endwert sehen gut aus
Squiggle 1.7ko Genauigkeitsproblem, Anfangs- und Endwert sehen gut aus
Opera8.02/50/ 9tp1/2/ beta1ko falsche oder keine Animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Genauigkeitsproblem

e2008-03-11-12: §P
animateColor und by-Animation:
Die Eigenschaft fill von Kreisen wird von nahezu schwarz nach nahezu weiß animiert, wobei 9 by-Animationen mit Schritten von 10% entsprechend 25.5 verwendet werden. Diese additiven Animationen werden mit einer einfachen values-Animation für fill mit demselben Anfangs- und Endwert für den größten Kreis verglichen. Falls es einen Unterschied zwischen fill der Kreise gibt, deutet dies ein Genauigkeitsproblem an, weil nur der endgültige Präsentationswert gerundet werden darf, nicht jede Animation einzeln. Der Hintergrund gibt den Anfangswert an und wandelt sich zum Endwert, wenn all Animationen zuende sind.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51ko falsche Animation
Amaya11.3.1ko keine Animation
KSVG1ko falsches animateColor, lustige Farben
WebKit 528.16kofalsche Animation
Adobeko falsches animateColor
Squiggle 1.7ko einige Genauigkeitsprobleme
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche oder keine Animation, verschiedenartiger Unsinn

to

e2006-06-04-01: §M(1)P
animateColor und to-Animation:
Änderungen von blau nach grün in 4s, zurück nach blau in weiteren 4s und Ende nach weiteren 4s mit grün. Die Änderungen sind nicht linear. Beachte, daß Farbewerte außerhalb des Bereiches 0 bis 255 nicht innerhalb der Animation korrigiert werden dürfen, erst der endgültige Präsentationswert müßte gegebenenfalls korrigiert werden. So oder so, wenn die Animation korrekt abläuft, gibt es keinen Wert außerhalb des Bereiches 0 bis 255.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko kein AnimateColor
WebKit 528.16kokeine Animation
Adobeko falsche Animation
Squiggle 1.7ko falsche Animation
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche oder keine Animation

calcMode

calcMode linear

e2008-03-12-21: §P
animateColor und calcMode linear:
fill für drei Rechtecke wird mit calcMode linear animiert.
Die Animationen werden mit entsprechenden einfacheren animateColor für stroke mit nur zwei Werten für jede Änderung verglichen.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

calcMode paced

e2008-03-12-31: §P
animateColor und calcMode paced:
fill für drei Rechtecke wird mit calcMode paced animiert.
Die Animationen werden mit entsprechenden einfacheren animateColor für stroke mit nur zwei Werten für jede Änderung verglichen.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko falsche Animation
Opera8.02/50ko kein fill
Opera9tp1/2/ beta1ko falsche Animation
Opera9beta2ok -
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche eingefrorene Werte

calcMode discrete

e2008-03-11-01: §M(2)PS
diskretes animateColor:
Die Eigenschaft fill des Kreises rechts unten wird diskret animiert von none nach dunkelblau zu none nach hellblau zu blau, zu dunkelblau zu none und so weiter, beginnt mit dunkelblau bei 3s, die wiederholte Dauer ist 10s.
animateColor wird verglichen mit der gleichen Animation der Eigenschaft stroke, wofür animate verwendet wird. Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor
WebKit 528.16kofalsche Animation
Adobeok-
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation
Opera8.02/50ko kein Wert none, stattdessen schwarz
Opera9tp1ko falsche diskrete Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

e2008-03-11-02: §M(2)PS
animateColor und animate, detektiere calcMode discrete automatisch:
Die Eigenschaft fill zweier Kreise wird animiert von dunkelblau, zu hellblau, zu blau, zu none, zu dunkelblau und so weiter, beginnt nach 2s, die wiederholte Dauer ist 10s. Weil es nicht möglich ist, zwischen einen Farbwert und none zu interpolieren, muß die Animation automatisch als diskret detektiert werden.
animate und animateColor werden mit den gleichen Animationen von stroke verglichen, die explizit calcMode discrete verwenden. Es kennzeichnet einen Fehler, falls es einen Unterschied gibt.
Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor, kein animate
WebKit 528.16kofalsche Animation
Adobefail Mischung zwischen diskreter und kontinuierlicher Animation
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin)
Opera8.02/50ko kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp1kofalscher Zeitablauf, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koteils kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation

Dies ist nicht SVG-tiny 1.1, aber SVG 1.1 oder SVG basic
e2008-03-11-03: §M(2)PS
diskretes animateColor:
Die Eigenschaft fill des Kreises rechts unten wird diskret animiert von none nach grau zu currentColor, zu einem linearen Gradienten, zu none, zu grau und so weiter, beginnt mit grau bei 3s, die wiederholte Dauer ist 10s. currentColor ist durch color definiert, welches in 11.1s mit den Werten magenta, blau, grün, gelb animiert wird. Falls etwas Rotes auftaucht, wird color nicht animiert.
animateColor wird verglichen mit der gleichen Animation der Eigenschaft stroke, wofür animate verwendet wird. Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor
WebKit 528.16kofalsche Animation
Adobeok-
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation
Opera8.02/50ko kein Wert none, stattdessen schwarz
Opera9tp1ko falsche diskrete Animation
Opera9tp2/ beta1/2/ 9.00/9.10kocurrentColor nicht animiert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

Dies ist nicht SVG-tiny 1.1, aber SVG 1.1 oder SVG basic
e2008-03-11-04: §M(2)PS
animateColor und animate, detektiere calcMode discrete automatisch:
Die Eigenschaft zweier Kreise wird nach 2s mit einer wiederholten Dauer von 14s mit folgenden Werten:
blue;#80f;blue;currentColor;url(#rG1) red;none;blue. currentColor ist durch color definiert, welches in 11.1s mit den Werten #80f; #00f; #0f8; #08f;#0ff;#80f animiert wird.
#rG1 ist ein radialer Farbverlauf.
Falls etwas Rotes auftaucht, wird color nicht animiert oder der Farbverlauf wird nicht interpretiert.
Weil es nicht möglich ist, zwischen einen Farbwert und none oder zwischen einem Farbwert und einem Farbverlauf zu interpolieren, muß die Animation automatisch als diskret detektiert werden.
animate und animateColor werden verglichen mit der gleichen Animation der Eigenschaft stroke, bei der explizit calcMode discrete angegeben ist.
Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor
WebKit 528.16kofalsche Animation
AdobekoMischung zwischen diskreter und kontinuierlicher Animation
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin)
Opera8.02/50ko kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp1ko keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp2/ beta1/2/ 9.00/9.10kocurrentColor nicht animiert, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koMischung zwischen diskreter und kontinuierlicher Animation

keyTimes

e2008-03-12-41: §P
animateColor und keyTimes:
fill für drei Rechtecke wird mit keyTimes animiert.
Die Animationen werden mit entsprechenden einfacheren animateColor für stroke mit nur zwei Werten für jede Änderung verglichen.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2008-03-12-42: §P
diskretes animateColor und keyTimes:
fill für drei Rechtecke wird mit keyTimes diskret animiert.
Die Animationen werden mit entsprechenden einfacheren animateColor für stroke mit nur zwei Werten für jede Änderung verglichen.
Ein Unterschied zwischen fill und stroke kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
WebKit 528.16ko keine Animation von stroke
Adobeok -
Squiggle 1.7ko falsche Fehlermeldungen durch einzelnen Wert in values
Opera8.02/50/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60ko kleineres Genauigkeitsproblem
Opera12,00ok -
Opera9tp1/2/ beta1/2/ 9.00/9.10ok -

e2008-03-23-01: §M(2)PS
animateColor und animate mit keyTimes, detektiere calcMode discrete automatisch:
Die Eigenschaft zweier Kreise wird nach 2s mit einer wiederholten Dauer von 14s mit folgenden Werten:
blue;#80f;none;blue;currentColor;none;red mit keyTimes 0;0.1;0.3;0.6;0.7;0.8;1. currentColor ist durch color definiert, welches in 11.1s mit den Werten #80f;#00f;#0f8;#08f;#0ff;#80f animiert wird.
Falls etwas Rotes auftaucht, wird color nicht animiert.
Weil es nicht möglich ist, zwischen einen Farbwert und none oder zwischen einem Farbwert und einem Farbverlauf zu interpolieren, muß die Animation automatisch als diskret detektiert werden. Man beachte, daß der Wert 'red' nie verwendet wird, weil dessen Wert für keyTimes 1 ist und die Animationen wiederholt werden.
animate und animateColor werden verglichen mit der gleichen Animation der Eigenschaft stroke, bei der explizit calcMode discrete angegeben ist.
Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor
WebKit 528.16ko falsche Animation von stroke
AdobekoMischung zwischen diskreter und kontinuierlicher Animation
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin)
Opera8.02/50ko kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp1ko keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp2/ beta1/2/ 9.00/9.10kocurrentColor nicht animiert, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koMischung zwischen diskreter und kontinuierlicher Animation, schwarz statt none

e2008-03-23-02: §M(2)PS
animateColor und animate mit keyTimes, detektiere calcMode discrete automatisch:
Die Eigenschaft zweier Kreise wird nach 2s mit einer wiederholten Dauer von 14s mit folgenden Werten:
blue;#80f;none;blue;currentColor;none;#008 mit keyTimes 0;0.05;0.1;0.3;0.6;0.8;0.9. currentColor ist durch color definiert, welches in 11.1s mit den Werten #80f;#00f;#0f8;#08f;#0ff;#80f animiert wird.
Falls etwas Rotes auftaucht, wird color nicht animiert.
Weil es nicht möglich ist, zwischen einen Farbwert und none oder zwischen einem Farbwert und einem Farbverlauf zu interpolieren, muß die Animation automatisch als diskret detektiert werden.
animate und animateColor werden verglichen mit der gleichen Animation der Eigenschaft stroke, bei der explizit calcMode discrete angegeben ist.
Die Spezifikation für SVG 1.1 ist zweideutig, ob animateColor nur für <color> oder auch für <paint> anwendbar ist, wie in der Tabelle animierbarer Attribute angegeben verglichen mit dem Abschnitt zu animateColor. Wie auch immer, der Abschnitt zu animateColor schließt dies auch nicht explizit aus.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko lustige Farben falsches AnimateColor
WebKit 528.16ko keine Animation
AdobekoMischung zwischen diskreter und kontinuierlicher Animation
Squiggle 1.7ko Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin)
Opera8.02/50ko kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp1ko keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation
Opera9tp2/ beta1/2/ 9.00/9.10kocurrentColor nicht animiert, Mischung zwischen diskreter und kontinuierlicher Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00koMischung zwischen diskreter und kontinuierlicher Animation, schwarz statt none

keySplines

e2008-03-13-01: §P
animateColor und keySplines:
fill von einigen Rechtecken wird mit keySplines und calcMode spline animiert.
Die aktive Dauer der animateColor wird zu speziellen Zeiten beendet. stroke zeigt die korrekte eingefrorene Farbe. Das große Hintergrundrechteck zeigt die komplette Animation.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51ko keine Animation, kein stroke
Amaya11.3.1ko keine Animation
KSVG1ko falsche Animation, lustige Farben
WebKit 528.16ko falsche eingefrorene Werte
Adobeok -
Squiggle 1.7(ok) ein kleineres Genauigkeitsproblem
Opera8.02/50ok-
Opera9tp1/2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Genauigkeitsprobleme
Opera9beta1ko keine Animation

e2008-03-13-02: §P
animateColor und keySplines:
fill von einigen Rechtecken wird mit keySplines und calcMode spline animiert.
Die aktive Dauer der animateColor wird zu speziellen Zeiten mit repeatDur beendet. stroke zeigt die korrekte eingefrorene Farbe. Das große Hintergrundrechteck zeigt die komplette Animation.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51ko keine Animation, kein stroke
Amaya11.3.1ko keine Animation
KSVG1ko falsche Animation, lustige Farben
WebKit 528.16ko falsche eingefrorene Werte
Adobeok -
Squiggle 1.7ko Genauigkeitsprobleme
Opera8.02/50ok-
Opera9tp1/2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Genauigkeitsprobleme
Opera9beta1ko keine Animation

additive

e2007-06-16-01: §M(2)P
Vergleich von additive und cumulative from-to, from-by und by mit values animateColor:
SMIL spezifiziert, wie from-to-, from-by- und by-Animationen in values-Animationen konvertiert werden müssen. Daher müssen es dieselben sein wie die entsprechenden values-Animationen.
Die Konversion ist wie folgt:
from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"
(by- und from-by-Animationen haben nur eine Bedeutung, wenn Werte irgendwie aufaddiert werden können. '0' wird als generelles Symbol für das neutrale Element der Addition des entsprechenden Attributes verwendet, dies bedeutet 0 + a = a + 0 = a. Und '0' ist nicht gleich dem Symbol '1' als die Basiseinheit des entsprechenden Attributes, '0' ist der Vorgänger von '1' im entsprechenden Attributraum. Im Farbraum wird 0 durch schwarz repräsentiert, #000, #000000, rgb(0,0,0) etc. Addition wird für die drei Komponenten der Farbe einzeln durchgeführt.)
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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko viele Fehler
KSVG1ko viele Fehler
WebKit 528.16ko falsche Animation
Adobekofalsche kumulative from-by- und falsche by-Animations
Squiggle 1.7kokeine Animation, falsche Fehlermeldungen
Opera8.02/50/ 9tp1/2 /beta1/ko Animation komplett falsch
Opera9beta2/ 9.00/9.10ko kumulative Animationen falsch
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

e2007-05-05-01: §P
additive animateColor:
fill einiger Kreise wird mit additivem animateColor animiert. Alle Kreise animieren von magenta nach cyan. Falls fill eines Kreises sich irgendwann von dem der anderen unterscheidet, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko überraschende farbfreudige Fehler ;o)
KSVG1ko überraschende farbfreudige Fehler ;o)
WebKit 528.16ko falsche Animation
Adobeko zentrierter kleiner Kreis falsch animiert
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2 /beta1/ko Animation komplett falsch
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

accumulate

e2007-05-05-11: §P
accumulate animateColor:
fill einiger Kreise wird mit kumulativem animateColor animiert. Alle Kreise animieren im blauen Bereich. stroke eines jeden Kreises hat eine simple Animation mit dem gleichen sichtbaren Effekt. Falls fill eines Kreises vom stroke verschieden ist, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko überraschende farbfreudige Fehler ;o)
KSVG1ko überraschende farbfreudige Fehler ;o)
WebKit 528.16ko falsche Animation
Adobeko einige Animationen sind falsch
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2 /beta1/ko Animation komplett falsch
Opera9beta2/ 9.00/9.10ko einige Animationen falsch
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Testergebnisse für animateColor
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/25 0/27
KSVG1 1/25 1/27
WebKit 528.16 7/25 7/27
Adobe 11/25 12/27
Squiggle 1.7 11/25 11/27
Opera8.02/50 6/25 6/27
Opera9tp1 5/25 5/27
Opera9tp2/beta1 8/25 8/27
Opera9beta2 12/25 12/27
Opera9.00/9.10 11/25 11/27
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 12/25 13/27
Opera11.00/11.60 11/25 12/27
Opera12,00 12/25 13/27
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 * 0/25 0/27

* animateColor komplett ignoriert.

animateMotion

mpath element

e2005-09-14-01: §M(1)P
animateMotion mit dem Element mpath:
Zwei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Der Pfad wird mit dem Element mpath definiert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-02: §M(1)P
animateMotion mit Unterpfaden:
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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1ko M-Zwischenräume werden auch animiert, dies sollte allerdings keine Zeit kosten
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-03: §M(1)P
animateMotion mit animiertem kubischen Pfad:
Zwei Kreise werden entlang eines animierten kubischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Die Animation des Pfades dauert 37s. Der anfängliche Pfad ist dunkel-blaugrau, der letzte Pfad ist hell-blauegrau, der animierte Pfad dünn grau dargestellt. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko Pfad nicht animiert
Opera8.02/50ko Pfad nicht animiert
Opera9tp1ko animierter Pfad falsch und ignoriert
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfad nicht animiert

e2007-04-06-01: §M(1)P
animateMotion mit animiertem kubischem Pfad:
Ein blaues Rechteck und ein roter Kreis werden entlang eines hellblauen Pfades mit einer Dauer von 20s und drei Wiederholungen bewegt. Der Pfad selbst wird mit jeder Wiederholung ausgetauscht. Dies resultiert in einer Bewegung entlang des grauen Pfades. Das Rechteck ist entlang beider Linien ausgerichtet. Das Rechteck verdeckt immer ein rotes Rechteck mit der gleichen Bewegung, die aber mit drei animateMotion mit dem Attribut path erreicht wird. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko Pfad nicht animiert , blauer Kreis zu groß
Opera8.02/50ko Pfad nicht animiert
Opera9tp1ko Falscher Zeitablauf für die Pfadanimation, Bewegung folgt nicht dem animierten Pfad
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfad nicht animiert

e2005-09-14-04: §M(1)P
animateMotion mit animiertem quadratischen Pfad:
Zwei Kreise werden entlang eines animierten quadratischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Die Animation des Pfades dauert 37s. Der anfängliche Pfad ist dunkel-blaugrau, der letzte Pfad ist hell-blauegrau, der animierte Pfad dünn grau dargestellt. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko Pfad nicht animiert
Opera8.02/50ko falscher animierter Pfad, Bewegung folgt nicht dem animierten Pfad
Opera9tp1ko Bewegung folgt nicht dem animierten Pfad
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfad nicht animiert

e2007-04-04-01: §M(1)P
animateMotion mit animiertem linearen 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 beider Linien ausgerichtet. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko Pfad nicht animiert, blauer Kreis zu groß
Opera8.02/50/ 9tp1ko Bewegung folgt nicht dem animierten Pfad
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfad nicht animiert

e2007-04-05-01: §M(1)P
animateMotion mit animiertem linearen 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.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko kleinere Probleme mit der Genauigkeit
Squiggle 1.7ko Pfad nicht animiert, blauer Kreis zu groß
Opera8.02/50/ 9tp1ko Bewegung folgt nicht dem animierten Pfad
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfad nicht animiert

Dies ist SVG 1.1 oder -basic, aber nicht SVG-tiny -
e2005-10-12-01: §M(1)PX
animateMotion mit einem externen Pfad:
Zwei Kreise werden entlang eines kubischen Pfades, referenziert von der Datei animatemotionmpath01.svg, mit einer Dauer von 30s und Wiederholung bewegt. Der Pfad wird mit dem Element mpath definiert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko keine Animation
Adobeko Attribut ignoriert
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko Attribut ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00(ok) kleineres Zeitablaufproblem zu Beginn
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für mpath
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/8
KSVG1 0/7 0/8
WebKit 528.16 7/7 7/8
Adobe 6/7 6/8
Squiggle 1.7 2/7 3/8
Opera8.02/50 2/7 2/8
Opera9tp1 1/7 1/8
Opera9tp2/beta1/2/ 9.00/9.10 7/7 7/8
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/7 8/8
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 3/7 3/8

Attribut path

e2005-09-14-05: §M(1)P
animateMotion mit Attribut path:
Zwei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Der Pfad wird mit dem Attribut path definiert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

values

e2005-09-14-06: §M(1)P
animateMotion mit values:
Zwei Kreise werden entlang eines Quadrates gegeben mit values mit einer Dauer von 30s und Wiederholung bewegt. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

to

e2005-09-14-07: §M(1)P
animateMotion mit from to:
Zwei Kreise werden von oben links nach unten rechts mit einer Dauer von 30s und Wiederholung bewegt, wobei from und to benutzt wird. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-06-03-03: §M(1)P
animateMotion und eingefrorene to-Animation:
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfades, 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. Beachte, daß 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko erstes animateMotion ignoriert
WebKit 528.16kokeine Animation in x-Richtung
Adobeko erstes animateMotion ignoriert
Squiggle 1.7kokeine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko erstes animateMotion ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko erstes animateMotion ignoriert

e2006-06-03-04: §M(1)P
animateMotion und to:
Zwei Kreise werden zu einer mit einem grauen Kreis markierten Position bewegt. Dazu wird animateMotion mit to für eine Translation zum Endwert verwendet. Zwei rote Kreise werden als Referenzen als einfacher Vergleich animiert. Falls die roten Kreise sichtbar werden, ist die Animation der blauen Kreise falsch. Zu beachten ist, daß to-Animationen ein spezielles additives Verhalten aufweisen, welches im Detail in der SMIL-Empfehlung definiert ist.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko kein AnimateMotion
WebKit 528.16kofalsche Animation
Adobekoimmer additive sum
Squiggle 1.7kokeine Animation, falsche Fehlermeldung
Opera8.02/50/ 9beta1ko immer additive replace
Opera9tp1/2/ beta2ko falsche Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0kofalsche Animation

by

e2005-09-14-08: §M(1)P
animateMotion mit by:
Zwei Kreise werden von oben links nach unten rechts bewegt, wobei mit einer Dauer von 5s und einem repeatCount von 8 by benutzt wird. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Falls etwas Dunkelrotes sichtbar wird, funktioniert es auch nicht für animateTransform.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16konicht additiv
Adobeok -
Squiggle 1.7kolustige Fehlermeldung 1 >=1 beendet Animation
Opera8.02/50ko Animation ok, nur Kontrollanimation falsch
Opera9tp1/2/ beta1ko falsche Animation, ignoriert accumulate
Opera9 beta2/ 9.00/9.10ko animateTransform zum Vergleich nicht additiv
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-09: §M(1)P
animateMotion mit by:
Zwei Kreise werden von oben links nach unten rechts bewegt, der dunkelblaue mit animateMotion, der hellblaue mit animateTransform. Beide nutzen die gleichen Werte für by, accumulate und repeatDur, was die gleiche Animation ergibt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16konicht additiv
Adobeok -
Squiggle 1.7kolustige Fehlermeldung 1 >=1 beendet Animation
Opera8.02/50ko animateTransform nicht animiert
Opera9tp1/2/ beta1ko animateTransform nicht animiert und accumulate ignoriert oder falsche Animation für tp2 and beta1
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-09-29-01: §M(1)P
animateMotion mit by:
Testet, ob eine by animateMotion additiv ist oder nicht. Rot kennzeichnet einen Fehler.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52ko nicht additiv
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Prioritätsregeln

e2007-01-30-01: §M(1)P
animateMotion Prioritätsregeln:
Ein Kreis wird entlang eines einfaches grau gekennzeichneten Pfad bewegt. Der Pfad wird durch das Element mpath festgelegt. Ein weiterer Pfad ist mit dem Attribut path angegeben. Zusätzlich sind die Attribute values, from, to und by angegeben. Die Prioritätsregeln spezifizieren mpath als den Pfad, dem zu folgen ist. Die anderen werden ignoriert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail falscher Pfad
KSVG1fail keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-02: §M(1)P
animateMotion Prioritätsregeln:
Ein Kreis wird entlang eines einfaches grau gekennzeichneten Pfad bewegt. Der Pfad wird durch das Attribut path festgelegt. Zusätzlich sind die Attribute values, from, to und by angegeben. Die Prioritätsregeln spezifizieren path als den Pfad, dem zu folgen ist. Die anderen werden ignoriert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail falscher Pfad
KSVG1fail keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-03: §M(1)P
animateMotion Prioritätsregeln:
Ein Kreis wird entlang eines einfaches grau gekennzeichneten Pfad bewegt. Der Pfad wird durch das Attribut values festgelegt. Zusätzlich sind die Attribute from, to und by angegeben. Die Prioritätsregeln spezifizieren values als den Pfad, dem zu folgen ist. Die anderen werden ignoriert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail falscher Pfad
KSVG1fail keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-04: §M(1)P
animateMotion Prioritätsregeln:
Ein Kreis wird entlang eines einfaches grau gekennzeichneten Pfad bewegt. Der Pfad wird durch die Attribute from und to festgelegt. Zusätzlich ist das Attribut by angegeben. Die Prioritätsregeln spezifizieren by zu ignorieren. Die anderen werden ignoriert. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail falscher Pfad
KSVG1fail keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für Prioritätsregeln
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/4 0/4
KSVG1 0/4 0/4
WebKit 528.164/4 4/4
Adobe 4/4 4/4
Squiggle 1.7 4/4 4/4
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 4/4 4/4
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 4/4 4/4

rotate

e2005-09-14-10: §M(1)Q
animateMotion mit rotate auto:
Zwei Kreise werden entlang eines quadratischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Ein geschlossener Pfad wird mit dem mpath element definiert. Das Attribut rotate ist auto. Für diese Animation bedeutet dies, daß die Kreisgruppe einmal ohne Wiederholung rotiert wird. Der kleine hellblaue Kreis wird in Bewegungsrichtung des großen blauen Kreises orientiert. Normaler Weise ist der hellblaue Kreis nicht exakt unter dem Pfad zentriert, aber ihm nahe.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-11: §M(1)Q
animateMotion mit rotate auto-reverse:
Zwei Kreise werden entlang eines quadratischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Ein geschlossener Pfad wird mit dem mpath element definiert. Das Attribut rotate ist auto-reverse. Für diese Animation bedeutet dies, daß die Kreisgruppe einmal ohne Wiederholung rotiert wird. Der kleine hellblaue Kreis wird entgegengesetzt zur Bewegungsrichtung des großen blauen Kreises orientiert. Normaler Weise ist der hellblaue Kreis nicht exakt unter dem Pfad zentriert, aber ihm nahe.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-12: §M(2)Q
animateMotion mit rotate:
Zwei Kreise werden entlang eines quadratischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Ein geschlossener Pfad wird mit dem mpath element definiert. Das Attribut rotate ist 30. Das hat den gleichen Effekt wie die Rotation der ganzen Gruppe mit dem gleichen Winkel.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-04-03-01: §M(1)P
animateMotion mit rotate:
Zwei blaue Rechtecke und ein roter Kreis bewegen sich entlang eines Pfades mit einer Dauer von 30 mit rotate auto, dann 30s mit rotate auto-reverse, dann 30s mit einem festen Winkel für rotate. Dies bedeutet für diese Animation, die Rechtecke sind zunächst entlang des Pfades ausgerichtet, dann in umgekehrter Richtung, dann mit einem festen Winkel. Der Kreis wird immer von dem grauen Pfad verdeckt. Rote Rechtecke mit animateTransform animiert haben die gleiche Bewegung wie die blauen und werden immer komplett von den blauen Rechtecken verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko rotate in späteren Animationen ignoriert
Adobeok -
Squiggle 1.7ko blauer Kreis falsche Größe, falsche Fehlermeldungen beenden Animation am Ende des oberen Pfades
Opera8.02/50ko kleinere Zeitablaufprobleme an den Enden einiger Pfadfragmente
Opera9tp1ko falsche Animation
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko falscher Zeitablauf
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-27-01: §M(1)P
animateMotion mit rotate:
Die Drehung bezogen auf das Attribut rotate von animateMotion ist eine ergänzende Transformationsmatrix auf die CTM und die Translation durch animateMotion.
Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Der Kreis ist im Ursprung zentriert.
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang des Weges zu orientieren, der längere Teil des Rechteckes liegt in Bewegungsrichtung.
Ein roter Vergleich ist zusammen mit dem Bewegungspfad verfügbar. Dies wird realisiert mit zusätzlichen verschachtelten g-Elementen und alternativ mit additiver Animation, in beiden Fällen eines für jede Transformationsanimation.
Der rote Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko rotate ignoriert
KSVG1ko keine Animation
WebKit 528.16ko rotate ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1ko falscher Zeitablauf
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-28-01: §M(1)P
animateMotion mit rotate:
Wenn animateMotion und animateTransform auf das gleiche Element wirken, ist die animateMotion eine ergänzende Transformationsmatrix auf die CTM der animateTransform. Die Drehung bezogen auf das Attribut rotate von animateMotion ist eine ergänzende Transformationsmatrix auf die CTM und die Translation durch animateMotion.
Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Der Kreis ist im Ursprung zentriert. Die Gruppe wird zusätzlich mit animateTransform geschert.
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang des Weges zu orientieren, der längere Teil des Rechteckes liegt in Bewegungsrichtung.
Der Bewegungspfad zum Vergleich in grau verfügbar. Ein roter Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko rotate und animateTransform ignoriert
KSVG1ko keine Animation
WebKit 528.16ko falsche Reihenfolge, rotate ignoriert, keine Animation des Tests
Adobeko falsche Reihenfolge
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Reihenfolge
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Reihenfolge

e2011-01-29-01: §M(1)P
animateMotion mit rotate:
Wenn animateMotion und animateTransform auf das gleiche Element wirken, ist die animateMotion eine ergänzende Transformationsmatrix auf die CTM der animateTransform. Die Drehung bezogen auf das Attribut rotate von animateMotion ist eine ergänzende Transformationsmatrix auf die CTM und die Translation durch animateMotion.
Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Die Gruppe ist geschert und an der y-Achse mit einer Transformation vom Typ scale gespiegelt. Der Kreis ist im Ursprung zentriert. Die Gruppe wird zusätzlich mit animateTransform geschert.
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang des Weges zu orientieren, der längere Teil des Rechteckes liegt in Bewegungsrichtung.
Der Bewegungspfad zum Vergleich in grau verfügbar. Ein roter Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko rotate und animateTransform ignoriert
KSVG1ko keine Animation
WebKit 528.16ko falsche Reihenfolge, rotate ignoriert, keine Animation des Tests
Adobeko falsche Reihenfolge
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Reihenfolge
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Reihenfolge

e2011-01-30-01: §M(1)P
animateMotion mit rotate:
Wenn animateMotion und animateTransform auf das gleiche Element wirken, ist die animateMotion eine ergänzende Transformationsmatrix auf die CTM der animateTransform. animateMotion kann additiv sein, daher ist rotate zusätzlich für jede einzelne animateMotion, nicht für die komplette Bewegung.
Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Der Kreis ist im Ursprung zentriert.
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang jedes einzelnen Weges zu orientieren, daher ist das Rechteck typisch nicht in Bewegungsrichtung der Superposition der additiven Bewegung ausgerichtet.
Der Bewegungspfad zum Vergleich in grau verfügbar. Dies ist mit zusätzlichen verschachtelten g-Elementen realisiert und alternative mit additiven Animationen, in beiden Fällen eine für jede Animation. Ein roter Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko animateTransform ignoriert, animateMotion falsch
KSVG1ko keine Animation
WebKit 528.16ko falsche Reihenfolge
Adobeok -
Squiggle 1.7ko falsche additive Drehung
Opera8.02/50/ 9tp1/ 9beta1ko falsche Reihenfolge
Opera9tp2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-31-01: §M(1)P
animateMotion mit rotate:
Die vom Attribut rotate von animateMotion bewirkte Drehung ist eine ergänzende Transformationsmatrix auf die CTM und die Translation durch animateMotion. Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Der Kreis ist im Ursprung zentriert.
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang des Weges zu orientieren, der längere Teil des Rechteckes liegt in Bewegungsrichtung.
Der Bewegungspfad zum Vergleich in grau verfügbar. Dies ist mit zusätzlichen verschachtelten g-Elementen realisiert und alternative mit additiven Animationen, in beiden Fällen eine für jede Animation.
Ein roter Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1koanimateTransform ignoriert, animateMotion falsch
KSVG1ko keine Animation
WebKit 528.16ko rotate ignoriert
Adobeok -
Squiggle 1.7ko falsches rotate
Opera8.02/50ko keine additive animateTransform
Opera9tp1/tp2ko Reihenfolge
Opera9beta1ko kein animateMotion
Opera9beta2/ 9.00/9.10ko falsche additive, kumulative Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-02-01-01: §M(1)P
animateMotion mit rotate:
Wenn animateMotion und animateTransform auf das gleiche Element wirken, ist die animateMotion eine ergänzende Transformationsmatrix auf die CTM der animateTransform. Die Drehung bezogen auf das Attribut rotate von animateMotion ist eine ergänzende Transformationsmatrix auf die CTM und die Translation durch animateMotion.
Was bedeutet dies für die Reihenfolge, in der die Transformationen angewendet werden? Dies kann mit verschachtelten g-Elementen simuliert werden.
Das Testobjekt ist hier eine Gruppe mit einem blauen Rechteck und einen Kreis. Die Gruppe ist geschert und an der y-Achse mit einer Transformation vom Typ scale gespiegelt. Der Kreis ist im Ursprung zentriert. Die Gruppe wird nach 5s mit animateTransform geschert, womit die anfängliche Scherung und Spiegelung ersetzt wird
Der beabsichtigte Effekt des Attributes rotate mit dem Wert 'auto' ist es, das Rechteck entlang des Weges zu orientieren, der längere Teil des Rechteckes liegt in Bewegungsrichtung.
Der Bewegungspfad zum Vergleich in grau verfügbar. Ein roter Vergleich muß komplett verdeckt sein, ist daher nicht sichtbar, sonst ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko rotate und animateTransform ignoriert
KSVG1ko keine Animation
WebKit 528.16ko falsche Reihenfolge, rotate ignoriert, keine Animation des Tests
Adobeko falsche Reihenfolge
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Reihenfolge
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Reihenfolge
Testergebnisse für rotate
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/10 0/10
KSVG1 0/10 0/10
WebKit 528.16 3/10 3/10
Adobe 7/10 7/10
Squiggle 1.7 7/10 7/10
Opera8.02/50 4/10 4/10
Opera9tp1 3/10 3/10
Opera9tp2/ 9beta2/ 9.00/9.10 6/10 6/10
Opera9beta1 5/10 5/10
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/10 7/10
Gecko 2.0 6/10 6/10
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 7/10 7/10

calcMode

calcMode linear

e2007-01-26-01: §M(1)P
lineares animateMotion:
Für ein Rechteck wird lineares animateMotion mit animateTransform verglichen. animateTransform ist blau und verdeckt komplett das rote animateMotion. Dunkelrot verwendet das Element mpath. hellrot das Attribute path und rot das Attribut values. Der Pfad besteht aus einem Dreieck, welches grau gekennzeichnet ist. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-01-26-02: §M(1)P
lineares animateMotion:
Für ein Rechteck wird lineares animateMotion mit animateTransform verglichen. animateTransform ist blau und verdeckt komplett das rote animateMotion. Dunkelrot verwendet das Element mpath. hellrot das Attribute path und rot das Attribut values. Der Pfad besteht aus einem Dreieck, welches grau gekennzeichnet ist. Die Pfade verwenden explizit das Kommando Z, um den Pfad zu schließen. In einer linearen Animation verbraucht das Z-Kommando auch Zeit, selbst wenn der damit verbundene Unerpfad die Länge 0 hat. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10ko falscher Zeitablauf für Pfade, die Z enthalten (mit Länge null bei Opera8, für 9, falls die Länge nicht null ist)
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-01-28-01: §M(1)P
linear animateMotion:
Für ein Rechteck wird lineares animateMotion mit animateTransform verglichen. animateTransform ist blau und verdeckt komplett das rote 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

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf, verschiedener Unsinn in 8, 9tp1 und 9tp2 und später
Gecko 2.0ko falscher Zeitablauf
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-26-03: §M(1)P
lineares animateMotion:
Lineares animateMotion mit symmetrischen quadratischen und kubischen Pfaden werden für zwei Rechtecke miteinander verglichen. Das blaue animateMotion entlang eines Pfades wird mit zwei roten gleichförmigen animateMotion für jedes Rechteck verglichen. Die blauen Animationen verdecken die roten immer komplett. Aufgrund von Symmetrien kann Weiteres verglichen werden, weil die Geschwindigkeit eines Rechteckes genau das Doppelte des langsameren ist. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko falscher Zeitablauf
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-12-01: §M(1)P
linear animateMotion:
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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein animateMotion
KSVG1ko kein animateMotion
WebKit 528.16fail calcMode ignoriert
Adobeko kleinere Genauigkeitsprobleme
Squiggle 1.7(ok) (Genauigkeit könnte etwas besser sein)
Opera8.02/50ko falscher Zeitablauf (nur erstes Pfadfragment verwendet)
Opera9tp1ko falsche Pfade
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-12-12-01: §M(1)P
linear animateMotion:
Ein Pfad mit verschiedenen Pfadfragmenten der Länge null wird für ein lineares animateMotion eines blauen Quadrates verwendet. Der Pfad ist in grau angegeben, einige einfachere animateMotion-Elemente werden verwendet, um die gleiche Bewegung bei einem roten Quadrat exakt unter dem blauen Quadrat durchzuführen. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1koNur ein animateMotion des roten Quadrates
KSVG1ko kein animateMotion
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ko Animation endet mit falscher Fehlermeldung mit Pfadfragmenten der Länge null
Opera8.02/50/ 9tp1/2 / beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Pfadfragmente der Länge null ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Pfadfragmente der Länge null ignoriert, falscher Zeitablauf

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-01-26-04: §M(1)P
lineares animateMotion:
Vergleichen von linearer animateMotion mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falscher Zeitablauf (anhalten und los für beta2 und spätere)
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

calcMode discrete

e2005-09-14-13: §M(1)P
animateMotion mit calcMode discrete:
Ein Kreis wird entlang eines kubischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. Ein geschlossener Pfad wird mit dem Attribut path definiert. Graue Markierungen zeigen die Kontrollpunkte als Positionen der diskreten Animation. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko kleinere Positionierungsprobleme
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-14: §M(1)P
vergleiche set und calcMode discrete:
animateMotion mit calcMode discrete wird mit einer set-Animation verglichen. Ein roter Kreis mit Radius 200 wird mit mehreren Schritten von jeweils 3s von links nach rechts gesetzt. Ein blauer Kreis mit Radius 200 verdeckt den roten Kreis und wird mit calcMode discrete animiert, was in der gleichen Bewegung resultiert. Deswegen verdeckt der blaue Kreis immer komplett und perfekt den roten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine diskrete Animation
WebKit 528.16fail calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1ko falsche Zeiteinteilung
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-12-13-01: §M(1)P
calcMode discrete und Pfadfragmente der Länge null:
Ein Pfad mit verschiedenen Pfadfragmenten der Länge null wird für ein diskretes animateMotion eines blauen Quadrates verwendet. Der Pfad ist in grau angegeben, einige einfachere animateMotion-Elemente werden verwendet, um die gleichen Sprünge bei einem roten Quadrat exakt unter dem blauen Quadrat durchzuführen. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine diskrete Animation
WebKit 528.16fail calcMode ignoriert
Adobeko leicht falscher Zeitablauf
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falscher Zeitablauf

calcMode paced

calcMode paced ist das voreingestellte Verhalten für animateMotion, weitere Tests dafür gibt es in anderen Abschnitten.

e2007-03-03-01: §M(1)P
paced animateMotion:
Eine gleichmäßige animateMotion eines blauen Quadrates mit zentriertem Kreis wird mit drei animateMotion eines roten Quadrates mit zentriertem Kreis verglichen. Die Bewegung des roten Quadrates folgt drei animateMotion, die aufeinander folgen und die gleiche Bewegung ergeben wie die des blauen Quadrates, weil der Zeitablauf geeignet gewählt ist. Daher verdeckt das blaue Quadrat immer komplett das rote.
Der Pfad ist in grau gegeben. Die Hintergrundfarben werden zu gewissen Symmetriezeiten umgeschaltet, dies sind die Zeiten, wenn 50 Prozent eines Unterpfades passiert sind.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.
Der Zeitablauf wird bestimmt, indem die Pfadlänge des oberen Fragmentes von 800, des unteren von 1600 und des gekurvten Fragmentes mit einem angenäherten Wert von 1809.55 verwendet wird, was zu einer Genauigkeit des Vergleichs besser als 0.1 Einheiten des lokalen Koordinatensystems entsprechend einer Genauigkeit des Zeitablaufs besser als 0.001s führt. Zu beachten ist, daß oberes und unteres Pfadfragment auch als nicht triviale Bezierkurve notiert sind, aber wie einfache Linien oder Polylinien aussehen.
Der Test ist nicht empfindlich auf Abweichungen in der Bewegung des gekurvten Fragmentes, nur bezogen auf den Gesamtpfad, falls die Anahme des Darstellungsprogrammes für die Pfadlänge eines Pfadfragmentes zum Beispiel falsch ist.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko kleinere Probleme im Zeitablauf im oberen und unteren Fragment
Squiggle 1.7(ok) Genauigkeit könnte etwas genauer sein
Opera8.02/50ko kleinere Probleme im Zeitablauf am Ende von Fragmenten
Opera9tp1ko falsche Pfade
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko falscher Zeitablauf
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-07-01: §M(1)P
paced animateMotion:
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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko letztes Fragment mit der Länge Null ignoriert
Adobeko Falscher Zeitablauf bedingt durch das letzte Pfadfragment mit der Länge Null und kleinere weitere Probleme beim Zeitablauf
Squiggle 1.7ko Falsche Fehlermeldung am Ende, letztes Pfadfragment mit der Länge Null ignoriert
Opera8.02/50ko kleinere weitere Probleme beim Zeitablauf am Ende von Fragmenten und mit dem letzten Fragment mit der Länge Null
Opera9tp1ko falsche Pfade
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko letztes Fragment mit der Länge Null ignoriert
Gecko 2.0ko falscher Zeitablauf
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko letztes Fragment mit der Länge Null ignoriert

e2007-12-14-01: §M(1)P
calcMode paced und Pfadfragmente der Länge null:
Ein Pfad mit verschiedenen Pfadfragmenten der Länge null wird für ein gleichmäßiges animateMotion eines blauen Quadrates verwendet. Der Pfad ist in grau angegeben, einige einfachere animateMotion-Elemente werden verwendet, um die gleiche Bewegung bei einem roten Quadrat exakt unter dem blauen Quadrat durchzuführen. Weil die Bewegung gleichmäßig ist, werden die Pfadfragmente der Länge null effektiv ignoriert. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko kein animateMotion
WebKit 528.16ok -
Adobeko falscher Zeitablauf
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko falscher Zeitablauf
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko falscher Zeitablauf
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-01-26-05: §M(1)P
paced animateMotion:
Vergleichen von paced animateMotion mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7(ok) Genauigkeit könnte etwas besser sein
Opera8.02/50ko kein animateTransform, falsches animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

calcMode spline

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-01-26-06: §M(1)P
spline animateMotion:
Vergleichen von spline animateMotion mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode ignoriert
Adobeok -
Squiggle 1.7(ok) Genauigkeit könnte etwas besser sein
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-26-07: §M(1)P
spline animateMotion:
Für ein Rechteck wird spline animateMotion mit animateTransform verglichen. animateTransform ist blau und verdeckt komplett das rote animateMotion. Dunkelrot verwendet das Element mpath. hellrot das Attribute path und rot das Attribut values. Der Pfad besteht aus einem Dreieck, welches grau gekennzeichnet ist. Die Pfade verwenden explizit das Kommando Z, um den Pfad zu schließen. In einer linearen Animation verbraucht das Z-Kommando auch Zeit. selbst wenn wenn der damit verbundene Unerpfad die Länge 0 hat. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode ignoriert und einige weitere Probleme
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10ko falscher Zeitablauf für Pfade, die Z enthalten (mit Länge null bei Opera8, für 9, falls die Länge nicht null ist)
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für calcMode
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/13 0/16
KSVG1 0/13 0/16
Adobe 8/13 11/16
WebKit 528.16 3/13 4/16
Squiggle 1.7 10/13 13/16
Opera8.02/50 2/13 2/16
Opera9tp1 6/13 6/16
Opera9tp2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 8/13 9/16
Opera9 beta2/ 9.00/9.10 6/13 7/16
Gecko 2.0 7/13 10/16
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 10/13 13/16

keyPoints

e2005-09-14-21: §M(2)P
animateMotion mit calcMode linear und discrete und keyPoints:
Drei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und Wiederholung bewegt. calcMode des dunkelblauen Kreises ist zum Vergleich paced, die des hellblauen ist linear, die des kleinen blauen discrete. Dunkelgraue Markierungen zeigen die Kontrollpunkte als Positionen der diskreten Animation. linear und discrete Animationen haben keyPoints von 0 bis 1 in Schritten von 0.1. Für die diskrete Animation bedeutet dies zehn gleichgroße Schritte entlang des Pfades, mit dunkelgrauen Lücken im grauen Pfad markiert. Weil der Pfad in zehn gleichgroße Schritte aufgeteilt ist, ist die lineare Animation nahezu die gleiche wie paced, aber nicht exakt. Es wird die paced-Animation mit jedem der 10 Schritte wieder exakt einholen.
e2006-09-11-01: §M(2)P
animateMotion mit calcMode linear und discrete und keyPoints:
Die gleiche Animation wie zuvor, nur mit Attribut path statt Element mpath
e2006-02-11-10: §M(2)P
animateMotion mit calcMode linear und discrete und keyPoints und pathLength:
Die gleiche Animation wie zuvor, nur mit definierter pathLength.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode und keyPoints ignoriert
Adobeko Attribut ignoriert
Squiggle 1.7konur pathLength im letzten Beispiel ignoriert
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko Attribut ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0konur pathLength im letzten Beispiel ignoriert
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-09-14-22: §M(1)P
animateMotion und animateTransform mit calcMode discrete und keyPoints:
Eine diskrete animateMotion von links nach rechts wird mit einer diskreten animateTransform von oben nach unten überlagert. keyPoints sind in Schritten von 10 Prozent festgelegt. Die Dauer der Animation ist 30s. Graue Punkte zeigen die Positionen der diskreten Animationen. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko falscher eingefrorener Wert
Adobeko Attribut ignoriert
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko Attribut ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-23: §M(1)P
animateMotion und animateTransform mit calcMode linear und keyPoints:
Eine lineare animateMotion von links nach rechts wird mit einer linearen animateTransform von oben nach unten überlagert. keyPoints werden mit einer quadratischen Kurve gegeben. Die Dauer der Animation ist 30s. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko Attribut ignoriert
Squiggle 1.7ok -
Opera8.02/50ko verwirrte Animation
Opera9tp1/2/ beta1/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta2ko kurze Störungen
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-24: §M(1)P
animateMotion und animateTransform mit calcMode linear und keyPoints:
Eine lineare animateMotion von links nach rechts wird mit einer linearen animateTransform von oben nach unten überlagert. keyPoints werden mit einer quadratischen Kurve gegeben. Die Dauer der Animation ist 30s. Der Bewegungspfad wird mit from und to festgelegt. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko keine animateMotion
Squiggle 1.7ok -
Opera8.02/50ko verwirrte Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-25: §M(1)P
animateMotion mit values, calcMode discrete und keyPoints:
Eine diskrete animateMotion 'Das ist das Haus vom Nikolaus'. Der Bewegungspfad wird mit einer Liste von Werten festgelegt. Aber die Liste der keyPoints ist doppelt so lang wie die der Werte. Diese sind mit dunkelgrauen Strichen gekennzeichnet. Dies bedeutet, die Punkte der diskreten Animation sind nicht nur die Ecken des Hauses, sie sind hauptsächlich dazwischen. Da die Linien unterschiedliche Länge haben, die keyPoints aber immer den gleichen Abstand aufweisen, werden sie die Werte im allgemeinen nicht treffen. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Positionen für keyPoints
Adobeko Attribut ignoriert
Squiggle 1.7ko pathLength ignoriert (Animation könnte korrekt sein)
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko Attribut ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko pathLength ignoriert (Animation könnte korrekt sein)
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-02-03-01: §M(1)PA
animateMotion zur Positionierung entlang eines Pfades:
Ein Anteil von 0.5 eines Pfades wird mit Kreisen markiert, wofür animateMotion und keyPoints verwendet werden. Jeder Kreis wird mit einer jeweils etwas anderen Methode positioniert. Aber immer verdeckt der blau gerandete Kreis die anderen. Die rote Füllung des blau gerandeten Kreises wird von einer grauen Markierung verdeckt, wofür stroke-dasharray und pathLength verwendet werden, um den Anteil 0.5 anzuzeigen. Weil der Pfad spiegelsymmetrisch ist, wird die korrekte Position ebenfalls durch den Hintergrund markiert, welcher je zur Hälfte weiß beziehungsweise grau gefärbt ist. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokein animateMotion
KSVG1kokein animateMotion
WebKit 528.16ko keine Animation
Adobeko mehrere Attribute ignoriert
Squiggle 1.7ko kuriose Fehlermeldung, keine Animation
Opera8.02/50ko mehrere Attribute ignoriert
Opera9tp1/2/beta1/2/ 9.00/9.10ko nur ein Testbeispiel nahezu richtig
Opera9.50 alpha/beta/ 9.52ko unvollständige Interpretation
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00kokeine Animation
Gecko 2.0ko pathLength ignoriert
Gecko 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0ko keine Animation

e2007-02-03-02: §M(2)P
animateMotion mit nicht monotoner Liste für keyPoints:
Eine nicht monotone Liste für keyPoints wird verewendet, um eine oszillatorische Bewegung entlang eines Pfades zu definieren. Die Wendepunkte der Bewegung sind in grau auf dem Pfad markiert, wozu stroke-dasharray und pathLength verwendet werden. Das Zentrum des bewegten Kreises muß exakt die markierten Wendepunkte der Bewegung treffen. Weil der Pfad und keyPoints spiegelsymmetrisch ist, sind die Markierungen auch symmetrisch. Als zusätzliche Hilfe ist der Hintergrund in eine weiße und eine graue Hälfte geteilt. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokein animateMotion
KSVG1kokein animateMotion
WebKit 528.16ko pathLength ignoriert (Animation könnte korrekt sein)
Adobeko kein animateMotion und pathLength
Squiggle 1.7ko pathLength ignoriert (Animation könnte korrekt sein)
Opera8.02/50ko verwirrt
Opera9tp1/2/beta1/2/ 9.00/9.10ko pathLength ignoriert (Animation könnte korrekt sein)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko pathLength ignoriert (Animation könnte korrekt sein)
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-05-12-11: §M(2)P
diskrete animateMotion mit nicht monotoner Liste für keyPoints:
Eine diskrete animateMotion mit keyPoints eines blau gerandeten Quadrates mit einem zentrierten Kreis wird mit einer values AnimateMotion eines roten Quadrates mit zentriertem Kreis verglichen.
Die Bewegung des roten Quadrates 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 falsch.
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 als Funktion der üblichen Parametrisation der verwendeten Bézierkurven ermittelt werden.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein animateMotion
KSVG1ko kein animateMotion
WebKit 528.16ko falscher eingefrorener Wert
Adobeko kein animateMotion mit keyPoints
Squiggle 1.7ko falscher Endwert, kleinere Genauigkeitsprobleme bei einigen Punkten
Opera8.02/50konur erstes Pfadfragment verwendet, keyPoints ignoriert
Opera9tp1/2/ beta1/2/ 9.00/9.10kokeyPoints ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-01-01: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von linearer animateMotion mit keyPoints mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko keine Animation des Testbeispiels
Adobeko keyPoints ignoriert
Squiggle 1.7(ok)kleinere Genauigkeitsprobleme
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falscher Zeitablauf (anhalten und los für beta2 und spätere)
Gecko 2.0/ 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0ko kein animateMotion

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-01-02: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von diskreter animateMotion mit keyPoints mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko keine Animation des Testbeispiels
Adobeko keyPoints ignoriert
Squiggle 1.7(ok)kleinere Genauigkeitsprobleme
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko keyPoints ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0ko kein animateMotion
Testergebnisse für keyPoints
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/8 0/10
KSVG1 0/8 0/10
WebKit 528.16 2/8 2/10
Adobe 0/8 0/10
Squiggle 1.7 3/8 5/10
Opera8.02/50 0/8 0/10
Opera9tp1/2/ beta1/ 9.00/9.10 2/8 2/10
Opera9 beta2 1/8 1/10
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/8 7/10
Gecko 2.0 4/8 6/10
Gecko 8.0/ 12.0/ 24.0 8/8 10/10
Gecko 36.0/ 48.0 7/8 7/10

keyTimes

e2008-02-26-01: §M(1)P
animateMotion mit keyTimes:
Einige Kreise werden entlang eines Rechtecks mit einer Dauer von 30s bewegt. Alle haben den gleichen Zeitablauf, daher verdecken die oberen blauen Kreise die anderen roten Kreise. Die blauen verwenden einen einfachen Pfad referenziert mit mpath oder den gleichen mit dem Attribut path oder mit values, alle mit keyTimes und calcMode linear.
Die roten Kreise darunter verwenden values und entweder keyTimes mit animateTransform oder eine Gruppe separierter animateMotion, die zum Vergleich den gleichen Zeitablauf aufweisen.
Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode ignoriert
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2008-02-27-01: §M(1)P
animateMotion mit keyTimes:
Einige Kreise werden entlang eines Rechtecks mit einer Dauer von 30s bewegt. Alle haben den gleichen Zeitablauf, daher verdecken die oberen blauen Kreise die anderen roten Kreise. Die blauen verwenden einen einfachen Pfad referenziert mit mpath oder den gleichen mit dem Attribut, alle mit keyTimes und calcMode linear.
Die roten Kreise darunter verwenden path und eine Gruppe separierter animateMotion, die zum Vergleich den gleichen Zeitablauf aufweisen.
Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode ignoriert
Adobeok -
Squiggle 1.7ko verwirrt mit path mit vielfachen M/m Kommandos
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0ko verwirrt mit path mit vielfachen M/m Kommandos
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2008-02-28-01: §M(1)P
animateMotion mit keyTimes:
Einige Kreise springen entlang eines Rechtecks mit einer Dauer von 30s. Alle haben den gleichen Zeitablauf, daher verdecken die oberen blauen Kreise die anderen roten Kreise. Die blauen verwenden einen einfachen Pfad referenziert mit mpath oder den gleichen mit dem Attribut path oder mit einem einfachen Pfad durch values gegeben, alle mit keyTimes und calcMode discrete.
Die roten Kreise darunter verwenden paht und eine Gruppe separierter animateMotion, die zum Vergleich den gleichen Zeitablauf aufweisen.
Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.
Beachte, daß Kontrollpunkte und Kommandos M/m außer dem anfänglichen des Pfades nicht als Sprungpunkte beitragen, daher gibt es exakt 5 Sprungpunkte für jeden Pfad.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode ignoriert
Adobeko falscher Zeitablauf
Squiggle 1.7ko verwirrt mit path mit vielfachen M/m Kommandos
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0ko verwirrt mit path mit vielfachen M/m Kommandos
Gecko 36.0/ 48.0ok -

e2005-09-14-31: §M(2)Q
animateMotion mit keyPoints und keyTimes:
Drei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und mit Wiederholung bewegt. Blaue und hellblaue Animation haben keyPoints von 0 bis 1 in Schritten von 0.1. Für die diskrete Animation bedeutet dies 10 Schritte mit gleichem Abstand den Pfad entlang mit dunkelgrauen Strichen im grauen Pfad markiert. Der dunkelblaue hat calcMode linear, der hellblaue hat Listen mit keyPoints und keyTimes und calcMode linear mit dem Effekt einer sich vergrößernden Geschwindigkeit. Zusätzlich zeigt blau eine diskrete Animation mit den gleichen keyPoints und keyTimes.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko zwei Kreise nicht animiert
Squiggle 1.7ok -
Opera8.02/50ko komplett verwirrte Bewegungen completely
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keyPoints für diskrete Animation ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-32: §M(1)P
animateMotion mit keyPoints und keyTimes:
Eine diskrete animateMotion von links nach rechts wird mit einer diskreten animateTransform von oben nach unten überlagert. keyPoints werden in Schritten zu 10 Prozent entsprechend den gegebenen werden definiert. keyTimes beinhaltet Werte einer quadratischen Kurve. Die Dauer der Animation ist 30s. Graue Punkte zeigen die Positionen der diskreten Animationen. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falscher Zeitablauf
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko Attribut ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-33: §M(1)Q
animateMotion mit keyPoints und keyTimes:
Eine lineare animateMotion von links nach rechts wird mit einer linearen animateTransform von oben nach unten überlagert. keyPoints und keyTimes haben die gleichen Werte entsprechend einer quadratischen Kurve. Die Dauer der Animation ist 30s. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten. Beachte, daß die Geschwindigkeit mit jeder keyTime erhöht wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeko Attribut ignoriert
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-34: §M(1)P
animateMotion mit keyPoints und keyTimes:
Eine lineare animateMotion von links nach rechts wird mit einer linearen Animation von cy (Kreis) von oben nach unten überlagert. animateMotion hat verschiedene keyPoints und keyTimes. Die Dauer der Animation ist 30s. Der sichtbare Effekt besteht in einer Bewegung entlang des grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten. Beachte, daß die Geschwindigkeit mit jeder keyTime erhöht wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche oder keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeko Attribut ignoriert
Squiggle 1.7ok -
Opera8.02/50ko verwirrt
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-01-11: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von linearer animateMotion mit keyPoints und keyTimes mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko kein animateMotion
Squiggle 1.7(ok)kleinere Genauigkeitsprobleme
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-01-12: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von diskreter animateMotion mit keyPoints und keyTimes mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falscher letzter Wert
Adobeko kein animateMotion
Squiggle 1.7(ok)kleinere Genauigkeitsprobleme
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keyPoints und KeyTimes ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko eingefrorener Wert falsch
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für keyTimes
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/9
KSVG1 0/7 0/9
WebKit 528.16 1/7 2/9
Adobe 3/7 3/9
Squiggle 1.7 5/7 7/9
Opera8.02/50 1/7 1/9
Opera9tp1/2/ beta1/2/ 9.00/9.10 2/7 3/9
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 4/7 5/9
Gecko 2.0 5/7 7/9
Gecko 8.0/ 12.0/ 24.0 6/7 8/9
Gecko 36.0/ 48.0 7/7 9/9

keySplines

e2005-09-14-41: §Q
animateMotion mit calcMode spline:
Drei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und mit Wiederholung bewegt. Der Pfad wird mittels des Elementes mpath festgelegt. Der magenta hat zum Vergleich calcMode paced, der blaue calcMode spline, Listen mit keyPoints, keyTimes und keySplines werden mit dem Effekt einer Abbremsung auf 0 für den halben Pfad festgelegt und mit einer Beschleunigung bis zur anfänglichen Geschwindigkeit bis zum Ende. Der gelbe Kreis hat zum Vergleich calcMode linear. Der Pfad hat als Markierungen gelbe Lücken im grauen Pfad, diese haben jeweils einen Abstand zwischeneinander von 0.1 der pathLength.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ko calcMode linear ignoriert
Adobeko zwei Kreise nicht animiert
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-42: §P
animateMotion mit calcMode spline:
Drei Kreise werden entlang eines kubischen Pfades mit einer Dauer von 30s und mit Wiederholung bewegt. Der Pfad wird mittels des Elementes mpath festgelegt. Der magenta hat calcMode paced, beim blauen mit calcMode spline und Listen für keyPoints, keyTimes und keySplines wird ein Effekt der Abbremsung und Beschleunigung zur ursprünglichen Geschwindigkeit festgelegt. Die keyPoints sind 0; 0.75; 1 und die keyTimes sind 0; 0.25; 1. Dies bedeutet Abbremsung in den ersten 6s bis 75 Prozent der pathLength und dann eine Beschleunigung für die restlichen 24s bis zum Ende des Pfades. Der Pfad hat als Markierungen gelbe Lücken im grauen Pfad, diese haben jeweils einen Abstand zwischeneinander von 0.25 der pathLength.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kokeine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko zwei Kreise nicht animiert
Squiggle 1.7ok -
Opera8.02/50ko komplett verwirrte Bewegungen
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-43: §M(1)PU
animateMotion mit calcMode spline:
Dies ist die gleiche Animation wie mit animateTransform und keySplines im Unterabschnitt keySplines.
Eine Bewegung mit einer konstanten Kraft, zum Beispiel im Gravitationsfeld der Erde knapp über der Oberfläche (nicht im Weltraum und ohne Reibung), kann exakt simuliert werden mit spline calcMode, values, keyTimes und keySplines. Die Trajektorie ist eine Parabel, hier exakt und unabhängig mit einer quadratischen Bezierkurve dargestellt, um einen Präzisionstest der spline-Animation des blauen Kreises mit rotem Zentrum zu ermöglichen. Der rote Teil wird exakt vom grauen Pfad verdeckt und wird nicht sichtbar, wenn die Animation korrekt ist. Die Animation ist eine Überlagerung von zwei unabhängigen Bewegungen - eine horizontale Bewegung mit konstanter Geschwindigkeit und einer vertikalen Bewegung mit konstanter Beschleunigung und einer Anfangsgeschwindigkeit ungleich null.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7(ok)kleinere Genauigkeitsprobleme
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok Genauigkeit könnte besser sein, Test könnte auch als fehlgeschlagen gewertet werden...
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0ko Kreis verschwunden

e2005-09-14-44: §M(1)PU
animateMotion mit calcMode spline:
Dies ist die gleiche Animation wie oben, wird aber nur korrekt angezeigt, wenn keyPoints in Kombination mit einfachen Werten nicht ignoriert werden.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ko horizontale Bewegung diskret
Adobeko keyPoints ignoriert
Squiggle 1.7(ok)siehe vorheriges Beispiel
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok siehe vorheriges Beispiel
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0ko Kreis verschwunden

e2005-09-14-45: §M(1)PU
additive animateMotion mit calcMode spline:
Dies ist die gleiche Animation wie oben, mit additiven Animationen realisiert. Eine Bewegung mit einer konstanten Kraft, zum Beispiel im Gravitationsfeld der Erde knapp über der Oberfläche (nicht im Weltraum und ohne Reibung), kann exakt simuliert werden mit spline calcMode, from, to und keySplines. Die Trajektorie ist eine Parabel, hier exakt und unabhängig mit einer quadratischen Bezierkurve dargestellt, um einen Präzisionstest der spline-Animation des blauen Kreises mit rotem Zentrum zu ermöglichen. er rote Teil wird exakt vom grauen Pfad verdeckt und wird nicht sichtbar, wenn die Animation korrekt ist. Die Animation ist eine Überlagerung von zwei unabhängigen Bewegungen - eine horizontale Bewegung mit konstanter Geschwindigkeit und einer vertikalen Bewegung mit konstanter Beschleunigung und einer Anfangsgeschwindigkeit ungleich null.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko keySplines ignoriert
Squiggle 1.7(ok)siehe vorheriges Beispiel
Opera8.02/50ok siehe vorheriges Beispiel
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok siehe vorheriges Beispiel
Opera9 beta1ko keySplines ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-06-11-01: §M(1)P
animateMotion mit calcMode spline:
Fortgeschrittener Test für calcMode spline, keySplines mit animateMotion.
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, daß 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16kokeySplines für einige Untertests ignoriert
Adobeko keySplines ignoriert für from-to, falscher Endwert
Squiggle 1.7ko falsche Fehlermeldung, kleinere Genauigkeitsprobleme
Opera8.02/50koKleinere Interpolationsprobleme, einiges Zittern, Unsinn bei mehr als einem M-Kommando, falscher Endwert
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Üble Interpolationsprobleme, Unsinn bei mehr als einem M-Kommando, falscher Endwert bis beta2
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-02-01: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von spline animateMotion mit keyPoints mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16koTestbeispiel nicht animiert
Adobeko keyPoints ignoriert
Squiggle 1.7(ok)siehe vorheriges Beispiel
Opera8.02/50ko kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keyPoints ignoriert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0ok -
Gecko 36.0/ 48.0ko kein animateMotion

Dies ist nicht SVG tiny 1.1, sondern SVG 1.1:
e2007-02-02-02: §M(1)P
vergleiche animateMotion und animateTransform:
Vergleichen von spline animateMotion mit keyPoints und keyTimes mit animateTransform für einen Kreis als Pfad eines Rechteckes. animateTransform ist rot und wird immer komplett vom blauen animateMotion verdeckt. Der Pfad besteht aus drei Teilen, entsprechend zwei Drehungen um 90 Grad und einer finalen von 180 zurück zur Anfangsposition. Der Pfad ist in grau angegeben. Falls etwas Rotes auftaucht, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko kein animateMotion
Squiggle 1.7ko falscher Endwert
Opera8.02/50ko verwirrtes oder kein animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für keySplines
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/6 0/8
KSVG1 0/6 0/8
WebKit 528.16 2/6 3/8
Adobe 1/6 1/8
Squiggle 1.7 5/6 6/8
Opera8.02/50 4/6 4/8
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/6 6/8
Opera9 beta1 4/6 5/8
Gecko 2.0/ 8.0/ 12.0 6/6 8/8
Gecko 24.0 4/6 6/8
Gecko 36.0/ 48.0 6/6 7/8

additive

e2007-06-13-01: §M(1)P
from-to, from-by und by animateMotion verglichen mit values animateMotion, additive oder accumulate:
Vergleich von from-to, from-by und by animate mit values animateMotion.
SMIL spezifiziert, wie from-to-, from-by- und by-Animationen in values-Animationen konvertiert werden müssen. Daher müssen es dieselben sein wie die entsprechenden values-Animationen.
Die Konversion ist wie folgt:
from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"
(by- und from-by-Animationen haben nur eine Bedeutung, wenn Werte irgendwie aufaddiert werden können. '0' wird als generelles Symbol für das neutrale Element der Addition des entsprechenden Attributes verwendet, dies bedeutet 0 + a = a + 0 = a. Und '0' ist nicht gleich dem Symbol '1' als die Basiseinheit des entsprechenden Attributes, '0' ist der Vorgänger von '1' im entsprechenden Attributraum. Für animateMotion ist '0' keine Bewegung beziehungsweise ist bezogen auf eine Translation in Koordinaten gegeben: 0,0.)
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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche from-by Animation
Squiggle 1.7ko keine Animation, falsche Fehlermeldung
Opera8.02/50ko accumulate ignoriert, falsche by Animation
Opera9tp1ko keine Animation
Opera9tp2ko falsche Animation
Opera9beta1ko keine kumulative Animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52ko falsche by Animation
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-06-01: §M(1)P
additive animateMotion:
Ein Kreis wird entlang einiger Pfade (zwei von ihnen sind in grau angegeben) mit einer Dauer von 30s entlang bewegt, wobei additive animateMotion verwendet wird. Die Superposition ergibt keine Animation. Der Kreis ist immer unten rechts 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.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeko kleinere Genauigkeitsprobleme
Squiggle 1.7ok -
Opera8.02/50kokleinere Genauigkeitsprobleme
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta1ko falsche Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

accumulate

e2005-05-07-11: §M(1)P
accumulate 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 sind gegeben, was keinen sichtbare Effekt hat, weil zentrierte Kreise bewegt werden. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1ko keine Animation
WebKit 528.16ko nicht cumulative
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10ko falsche Animation mit 8 und 9tp1, accumulate von 9tp2 ignoriert, keine Animation mit 9beta1, falsche Endposition mit 9beta2. Einiger Unsinn bedingt durch das Attribut rotate seit 9tp1.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

fill

e2007-12-15-01: §M(1)P
eingefrorene animateMotion:
Der eingefrorene Wert für animateMotion wird für Pfade getestet, deren letzte Fragmente die Länge null haben. Der letzte Wert der aktiven Dauer wird als eingefrorener Wert verwendet. Falls der letzte Wert das letzte Fragment mit der Pfadlänge null ist, wird dies aufgrund einer besonderen Regel gewählt. Die gilt für die oberen drei Untertests. Im unteren Test wird die aktive Dauer durch repeatDur ohne spezielle Regel gekürzt. Daher springt die Animation nicht zu einem der Fragmente der Länge null. animateMotion bewegt blaue Quadrate, rote Quadrate mit der gleichen Bewegung werden immer komplett verdeckt. Pfade sind in grau angegeben.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falscher eingefrorener Wert
Adobeko falsche Animation, falsche eingefrorene Werte
Squiggle 1.7ko beendet Animation mit falscher Fehlermeldung
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche eingefrorene Werte
Gecko 2.0ko falsche Animation, falsche eingefrorene Werte
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche eingefrorene Werte

e2007-12-15-02: §M(1)P
eingefrorene lineare animateMotion:
Der eingefrorene Wert für lineare animateMotion wird für Pfade getestet, die Fragmente der Länge null haben. Der letzte Wert der aktiven Dauer wird als eingefrorener Wert verwendet. Falls der letzte Wert das Fragment mit der Pfadlänge null ist, wird dies gewählt. animateMotion bewegt blaue Quadrate, rote Quadrate mit der gleichen Bewegung werden immer komplett verdeckt. Pfade sind in grau angegeben.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche Animation, falsche eingefrorene Werte
Squiggle 1.7ko bei unteren Beispielen verwirrt; stoppt Animation mit falscher Fehlermeldung
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00kofalsche Animation, falsche eingefrorene Werte
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Animation, falsche eingefrorene Werte
Testergebnisse für animateMotion
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/68 0/78
KSVG1 0/68 0/78
WebKit 528.16 27/68 30/78
Adobe 36/68 39/78
Squiggle 1.7 42/68 51/78
Opera8.02/50 20/68 20/78
Opera9tp1 27/68 29/78
Opera9tp2 38/68 41/78
Opera9 beta1 35/68 38/78
Opera9 beta2 /9.00/9.10 37/68 37/78
Opera9.50 alpha/beta/ 9.52 49/68 53/78
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 51/68 55/78
Gecko 2.0 44/68 53/78
Gecko 8.0/ 12.0 53/68 62/78
Gecko 24.0 51/68 60/78
Gecko 36.0/ 48.0 53/68 59/78