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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | Animation unvollständig |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Sehr einfache animate-Animationen können mit KSVG funktionieren, dies ist bereits in anderen Beispielen gezeigt worden.
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | dur bei set ignoriert? |
| WebKit 528.16 | ko | rote Vergleichsanimation falsch |
| Adobe | ok | - |
| Squiggle 1.7 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | animiert ohne Interaktion |
| WebKit 528.16 | ko | sucht nicht rückwärts beim vierten Klick |
| Adobe | ok | - |
| Squiggle 1.7 | ko | falscher Zeitablauf bei Wiederholung |
| Opera8.02/50 | ko | keine Animation |
| Opera9tp1 | ko | kein set von xlink:href |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | falscher Zeitablauf der Historie |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | ko | keine Interaktivität |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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).
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | immer grün |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keine Animation |
| Adobe | ko | keine Animation |
| Squiggle 1.7 | ko | keine Animation |
| Opera8.02/50 | ko | 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,00 | ko | keine Animation |
| Gecko 2.0/ 8.0/ 12.0 | ko | keine Interaktivität |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | immer grün |
| KSVG1 | ko | keine Interaktion |
| WebKit 528.16 | ko | falsche Farben nach der ersten Runde |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | keine Historie, manchmal funktionieren nicht alle Klicks |
| Gecko 2.0/ 8.0/ 12.0 | ko | keine Interaktivität |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Interaktivität |
| KSVG1 | ko | keine Interaktion |
| WebKit 528.16 | ko | nicht wiederholt |
| Adobe | ko | instabil, einige Klicks ignoriert |
| Squiggle 1.7 | ko | unterliegender anfänglicher Wert ignoriert |
| Opera8.02/50 | ko | keine Animation |
| Opera9tp1 | ko | 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,00 | ok | (in 9.50 alpha/beta/ 9.52 störende Reste der 'Fokusbox') |
| Gecko 2.0/ 8.0/ 12.0 | ko | keine Interaktivität |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Interaktivität |
| KSVG1 | ko | keine Interaktion |
| WebKit 528.16 | ko | einige Ereignisse werden ignoriert, wenn sie auf das Attribute end angewendet werden. |
| Adobe | ko | einige Ereignisse werden ignoriert, wenn sie auf das Attribute end angewendet werden. |
| Squiggle 1.7 | ko | unten links verschwindet für immer, unten rechts funktioniert nur einmal |
| Opera8.02/50 | ko | die meisten Ereignisse ignoriert, stürzt bei einigen Ereignissen ab, falls auf das Attribut angewendet |
| Opera9tp1/ beta1/2 | ko | 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.00 | ok | (Kreis rechts unten instabil) |
| Opera11.60 | ko | unten rechts keine Funktion |
| Opera12,00 | ko | einige Ereignisse ignoriert |
| Gecko 2.0/ 8.0 | ko | unten rechts bleibt es sichtbar nach Klick und Bewegung |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | ko | keine Interaktivität |
| Gecko 60.0 | ko | unten rechts bleibt es sichtbar nach Klick und Bewegung, rechts unten bleibt es unsichtbar |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 5/5 | 5/6 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | ko | referenziertes SVG animiert, aber keine Transformation |
| Amaya11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation, keine Transformation |
| WebKit 528.16 | ko | nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war. |
| Adobe | ko | nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war. |
| Squiggle 1.7 | ko | nahezu ok, aber das SVG-Dokument wird nicht animiert. Es ist e2005-09-12-01, was als Einzeldokument in Ordnung war. |
| Opera8.02/50 | ko | keine Anzeige |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ko | viele Störungen in alpha, das SVG-Dokument animiert nicht |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | das SVG-Dokument animiert nicht |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | (ok) | manchmal bei Nullskalierung eingefroren |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | (Text in tp2 ein wenig instabil) |
| Gecko 2.0/ 8.0/ 12.0 | fail | text-Animation gestört |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | Text gestört und ein Rest des Textes verschwindet nicht |
| Adobe | ko | ein Rest der Form verschwindet nicht |
| Adobe | ko | 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,00 | ok | (Text in tp2 ein wenig instabil) |
| Gecko 2.0/ 8.0/ 12.0 | fail | text-Animation gestört |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | eingefroren/abgestürzt |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | ko | keine Anzeige oder Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | text-Animation gestört |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | fail | kein animateTransform |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | nicht additiv |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | keine Animation |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | keine Animation |
| Gecko 2.0 | ok | - |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation, manchmal eingefroren |
| Adobe | ko | keine lineare Animation |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung, falsche stroke-width! |
| Opera8.02/50 | ko | Formen verschwinden |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | keine lineare Animation. bug-212137 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | falsche Animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | keine lineare Animation |
| Squiggle 1.7 | ko | falsche stroke-width! |
| Opera8.02/50 | ko | Formen verschwinden |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | keine lineare Animation. bug-212137 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | text-Animation gestört |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | kein AnimateTransform |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | erste animateTransform ignoriert |
| Squiggle 1.7 | ko | falsche Animation |
| Opera8.02/50 | ko | keine Animation |
| Opera9tp1 | ko | 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,00 | ko | falsche Animation |
| Gecko 2.0/ 8.0/ 12.0 | ok | - |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | kein AnimateTransform |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Animation diskret, nicht linear |
| Squiggle 1.7 | ko | falsche Animation |
| Opera8.02/50 | ko | blaue Kreise verschwinden |
| Opera9tp1 | ko | kleiner Kreis falsch animiert |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | falsche Animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keySplines ignoriert für from-to, from-by |
| Adobe | ko | keySplines ignoriert für from-to, from-by |
| Squiggle 1.7 | ko | from-by Animation ignoriert, Genauikgkeit für die anderen könnte besser sein. |
| Opera8.02/50 | ko | keine keySpline-Animation |
| Opera9tp1/2/ beta1 | ko | 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,00 | ko | schlechte Interpolation |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | ko | kein blauer Kreis |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | falsche Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | 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,00 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | falsche Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | falsche oder keine Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | Animation kompletter Unfug |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | falsche Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Falsche Interpretation von kumulativen from-by-Animationen |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9tp1 | ko | falsche Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | additive 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | Animationsbeginn etwas zu klein |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | in 9tp2 ist der Text instabil |
| Gecko 2.0/ 8.0/ 12.0 | fail | text-Animation gestört |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | in 9tp2 ist der Text instabil |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.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.
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | hübsche farbfreudige Fehler ;o) |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | hübsche farbfreudige Fehler ;o) |
| WebKit 528.16 | ko | currentColor falsch |
| Adobe | ko | Animation nicht kontinuierlich |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | currentColor falsch |
| Opera9tp1 | ko | 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,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation, falsche Farben |
| WebKit 528.16 | ko | Animation falsch |
| Adobe | ko | Animation nicht kontinuierlich |
| Squiggle 1.7 | ko | falsche 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,00 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | hübsche farbfreudige Fehler ;o) |
| WebKit 528.16 | ko | einzige Farbe: schwarz |
| Adobe | ko | einzige Farbe: schwarz |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | ko | 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,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | überraschende farbfreudige Fehler ;o) |
| WebKit 528.16 | ko | keine Animation des Rechtecks |
| Adobe | ko | leicht falsche Farben in der Animation |
| Squiggle 1.7 | ko | Animation komplett falsch |
| Opera8.02/50 | ko | Animation komplett falsch |
| Opera9tp1/2 beta1/2/ 9.00/9.10 | ko | falsche Animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | ko | falsche Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein stroke, Test selbst ok |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein fill |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | kein fill |
| Opera9tp1/2/ beta1 | ko | 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,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein fill |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | kein fill |
| Opera9tp1/2/ beta1 | ko | falsche Animation |
| Opera9beta2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | falsche 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein fill |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsche oder keine Animation |
| Squiggle 1.7 | ko | falsche oder keine Animation |
| Opera8.02/50 | ko | kein fill |
| Opera9tp1/2/ beta1 | ko | falsche Animation |
| Opera9beta2/ 9.00/9.10 | ko | falsche Animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | (andere) falsche Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | ko | falsche Animation |
| Amaya11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsches animateColor, lustige Farben |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsches animateColor, Anfangs- und Endwert sehen gut aus |
| Squiggle 1.7 | ko | Genauigkeitsproblem, Anfangs- und Endwert sehen gut aus |
| Opera8.02/50/ 9tp1/2/ beta1 | ko | 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,00 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | ko | falsche Animation |
| Amaya11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsches animateColor, lustige Farben |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsches animateColor |
| Squiggle 1.7 | ko | 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,00 | ko | falsche oder keine Animation, verschiedenartiger Unsinn |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | kein AnimateColor |
| WebKit 528.16 | ko | keine Animation |
| Adobe | ko | falsche Animation |
| Squiggle 1.7 | ko | 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,00 | ko | falsche oder keine Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ko | falsche Animation |
| Opera8.02/50 | ko | kein fill |
| Opera9tp1/2/ beta1 | ko | falsche Animation |
| Opera9beta2 | ok | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | falsche eingefrorene Werte |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz |
| Opera9tp1 | ko | 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,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor, kein animate |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | fail | Mischung zwischen diskreter und kontinuierlicher Animation |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin) |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp1 | ko | falscher 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,00 | ko | teils 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz |
| Opera9tp1 | ko | falsche diskrete Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | currentColor nicht animiert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | Mischung zwischen diskreter und kontinuierlicher Animation |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin) |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp1 | ko | keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | currentColor 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,00 | ko | Mischung zwischen diskreter und kontinuierlicher Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation |
| WebKit 528.16 | ko | keine Animation von stroke |
| Adobe | ok | - |
| Squiggle 1.7 | ko | 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.60 | ko | kleineres Genauigkeitsproblem |
| Opera12,00 | ok | - |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor |
| WebKit 528.16 | ko | falsche Animation von stroke |
| Adobe | ko | Mischung zwischen diskreter und kontinuierlicher Animation |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin) |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp1 | ko | keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | currentColor 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,00 | ko | Mischung 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | lustige Farben falsches AnimateColor |
| WebKit 528.16 | ko | keine Animation |
| Adobe | ko | Mischung zwischen diskreter und kontinuierlicher Animation |
| Squiggle 1.7 | ko | Fehlermeldung über falsche Werte, keine Animation (nur für animate: siehe Kommentar zum adobe plugin) |
| Opera8.02/50 | ko | kein Wert none, stattdessen schwarz, Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp1 | ko | keine Animation von currentColor, falscher Zeitablauf und Mischung zwischen diskreter und kontinuierlicher Animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | ko | currentColor 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,00 | ko | Mischung zwischen diskreter und kontinuierlicher Animation, schwarz statt none |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | ko | keine Animation, kein stroke |
| Amaya11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation, lustige Farben |
| WebKit 528.16 | ko | falsche eingefrorene Werte |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | ein kleineres Genauigkeitsproblem |
| Opera8.02/50 | ok | - |
| 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,00 | ko | Genauigkeitsprobleme |
| Opera9beta1 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | ko | keine Animation, kein stroke |
| Amaya11.3.1 | ko | keine Animation |
| KSVG1 | ko | falsche Animation, lustige Farben |
| WebKit 528.16 | ko | falsche eingefrorene Werte |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Genauigkeitsprobleme |
| Opera8.02/50 | ok | - |
| 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,00 | ko | Genauigkeitsprobleme |
| Opera9beta1 | ko | keine Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | viele Fehler |
| KSVG1 | ko | viele Fehler |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsche kumulative from-by- und falsche by-Animations |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldungen |
| Opera8.02/50/ 9tp1/2 /beta1/ | ko | Animation komplett falsch |
| Opera9beta2/ 9.00/9.10 | ko | kumulative Animationen falsch |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | überraschende farbfreudige Fehler ;o) |
| KSVG1 | ko | überraschende farbfreudige Fehler ;o) |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | zentrierter kleiner Kreis falsch animiert |
| Squiggle 1.7 | ok | - |
| 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,00 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | überraschende farbfreudige Fehler ;o) |
| KSVG1 | ko | überraschende farbfreudige Fehler ;o) |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | einige Animationen sind falsch |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2 /beta1/ | ko | Animation komplett falsch |
| Opera9beta2/ 9.00/9.10 | ko | einige Animationen falsch |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 * | 0/25 | 0/27 |
* animateColor komplett ignoriert.
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Pfad nicht animiert |
| Opera8.02/50 | ko | Pfad nicht animiert |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Pfad nicht animiert , blauer Kreis zu groß |
| Opera8.02/50 | ko | Pfad nicht animiert |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Pfad nicht animiert |
| Opera8.02/50 | ko | falscher animierter Pfad, Bewegung folgt nicht dem animierten Pfad |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ko | Pfad nicht animiert, blauer Kreis zu groß |
| Opera8.02/50/ 9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | kleinere Probleme mit der Genauigkeit |
| Squiggle 1.7 | ko | Pfad nicht animiert, blauer Kreis zu groß |
| Opera8.02/50/ 9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keine Animation |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ko | 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.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 3/7 | 3/8 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | erstes animateMotion ignoriert |
| WebKit 528.16 | ko | keine Animation in x-Richtung |
| Adobe | ko | erstes animateMotion ignoriert |
| Squiggle 1.7 | ko | 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,00 | ko | erstes animateMotion ignoriert |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | kein AnimateMotion |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | immer additive sum |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50/ 9beta1 | ko | immer additive replace |
| Opera9tp1/2/ beta2 | ko | falsche Animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | falsche Animation |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | nicht additiv |
| Adobe | ok | - |
| Squiggle 1.7 | ko | lustige Fehlermeldung 1 >=1 beendet Animation |
| Opera8.02/50 | ko | Animation ok, nur Kontrollanimation falsch |
| Opera9tp1/2/ beta1 | ko | falsche Animation, ignoriert accumulate |
| Opera9 beta2/ 9.00/9.10 | ko | animateTransform zum Vergleich nicht additiv |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | nicht additiv |
| Adobe | ok | - |
| Squiggle 1.7 | ko | lustige Fehlermeldung 1 >=1 beendet Animation |
| Opera8.02/50 | ko | animateTransform nicht animiert |
| Opera9tp1/2/ beta1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-09-29-01: §M(1)P
animateMotion mit by:
Testet, ob eine by animateMotion additiv ist oder nicht.
Rot kennzeichnet einen Fehler.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | ko | nicht additiv |
| Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | falscher Pfad |
| KSVG1 | fail | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | falscher Pfad |
| KSVG1 | fail | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | falscher Pfad |
| KSVG1 | fail | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | falscher Pfad |
| KSVG1 | fail | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/4 | 0/4 |
| KSVG1 | 0/4 | 0/4 |
| WebKit 528.16 | 4/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/ 60.0 | 4/4 | 4/4 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | rotate in späteren Animationen ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ko | blauer Kreis falsche Größe, falsche Fehlermeldungen beenden Animation am Ende des oberen Pfades |
| Opera8.02/50 | ko | kleinere Zeitablaufprobleme an den Enden einiger Pfadfragmente |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0 | ko | falscher Zeitablauf |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | rotate ignoriert |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | rotate ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | rotate und animateTransform ignoriert |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Reihenfolge, rotate ignoriert, keine Animation des Tests |
| Adobe | ko | falsche Reihenfolge |
| Squiggle 1.7 | ok | - |
| 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,00 | ko | falsche Reihenfolge |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | rotate und animateTransform ignoriert |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Reihenfolge, rotate ignoriert, keine Animation des Tests |
| Adobe | ko | falsche Reihenfolge |
| Squiggle 1.7 | ok | - |
| 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,00 | ko | falsche Reihenfolge |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | animateTransform ignoriert, animateMotion falsch |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Reihenfolge |
| Adobe | ok | - |
| Squiggle 1.7 | ko | falsche additive Drehung |
| Opera8.02/50/ 9tp1/ 9beta1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | animateTransform ignoriert, animateMotion falsch |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | rotate ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ko | falsches rotate |
| Opera8.02/50 | ko | keine additive animateTransform |
| Opera9tp1/tp2 | ko | Reihenfolge |
| Opera9beta1 | ko | kein animateMotion |
| Opera9beta2/ 9.00/9.10 | ko | falsche additive, kumulative Animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | rotate und animateTransform ignoriert |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Reihenfolge, rotate ignoriert, keine Animation des Tests |
| Adobe | ko | falsche Reihenfolge |
| Squiggle 1.7 | ok | - |
| 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,00 | ko | falsche Reihenfolge |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | falsche Reihenfolge |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 7/10 | 7/10 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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,00 | ko | falscher Zeitablauf, verschiedener Unsinn in 8, 9tp1 und 9tp2 und später |
| Gecko 2.0 | ko | falscher Zeitablauf |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein animateMotion |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ko | kleinere Genauigkeitsprobleme |
| Squiggle 1.7 | (ok) | (Genauigkeit könnte etwas besser sein) |
| Opera8.02/50 | ko | falscher Zeitablauf (nur erstes Pfadfragment verwendet) |
| Opera9tp1 | ko | 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,00 | ko | falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | Nur ein animateMotion des roten Quadrates |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ko | 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,00 | ko | Pfadfragmente der Länge null ignoriert |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ko | Falscher Zeitablauf (anhalten und los für beta2 und spätere) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine diskrete Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine diskrete Animation |
| WebKit 528.16 | fail | calcMode ignoriert |
| Adobe | ko | leicht falscher Zeitablauf |
| Squiggle 1.7 | ko | 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,00 | ko | falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | falscher Zeitablauf |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | kleinere Probleme im Zeitablauf im oberen und unteren Fragment |
| Squiggle 1.7 | (ok) | Genauigkeit könnte etwas genauer sein |
| Opera8.02/50 | ko | kleinere Probleme im Zeitablauf am Ende von Fragmenten |
| Opera9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0 | ko | falscher Zeitablauf |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | letztes Fragment mit der Länge Null ignoriert |
| Adobe | ko | Falscher Zeitablauf bedingt durch das letzte Pfadfragment mit der Länge Null und kleinere weitere Probleme beim Zeitablauf |
| Squiggle 1.7 | ko | Falsche Fehlermeldung am Ende, letztes Pfadfragment mit der Länge Null ignoriert |
| Opera8.02/50 | ko | kleinere weitere Probleme beim Zeitablauf am Ende von Fragmenten und mit dem letzten Fragment mit der Länge Null |
| Opera9tp1 | ko | 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,00 | ko | letztes Fragment mit der Länge Null ignoriert |
| Gecko 2.0 | ko | falscher Zeitablauf |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | ok | - |
| Adobe | ko | falscher Zeitablauf |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | ko | 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,00 | ok | - |
| Gecko 2.0 | ko | falscher Zeitablauf |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | Genauigkeit könnte etwas besser sein |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | Genauigkeit könnte etwas besser sein |
| Opera8.02/50 | ko | 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,00 | ko | Falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode ignoriert und einige weitere Probleme |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 10/13 | 13/16 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode und keyPoints ignoriert |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ko | nur pathLength im letzten Beispiel ignoriert |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ko | Attribut ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0 | ko | nur pathLength im letzten Beispiel ignoriert |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falscher eingefrorener Wert |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ko | Attribut ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Opera9 beta2 | ko | kurze Störungen |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | keine animateMotion |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Positionen für keyPoints |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ko | pathLength ignoriert (Animation könnte korrekt sein) |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ko | Attribut ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0 | ko | pathLength ignoriert (Animation könnte korrekt sein) |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein animateMotion |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | ko | keine Animation |
| Adobe | ko | mehrere Attribute ignoriert |
| Squiggle 1.7 | ko | kuriose Fehlermeldung, keine Animation |
| Opera8.02/50 | ko | mehrere Attribute ignoriert |
| Opera9tp1/2/beta1/2/ 9.00/9.10 | ko | nur ein Testbeispiel nahezu richtig |
| Opera9.50 alpha/beta/ 9.52 | ko | unvollständige Interpretation |
| Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | keine Animation |
| Gecko 2.0 | ko | pathLength ignoriert |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein animateMotion |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | ko | pathLength ignoriert (Animation könnte korrekt sein) |
| Adobe | ko | kein animateMotion und pathLength |
| Squiggle 1.7 | ko | pathLength ignoriert (Animation könnte korrekt sein) |
| Opera8.02/50 | ko | verwirrt |
| Opera9tp1/2/beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0 | ko | pathLength ignoriert (Animation könnte korrekt sein) |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | kein animateMotion |
| KSVG1 | ko | kein animateMotion |
| WebKit 528.16 | ko | falscher eingefrorener Wert |
| Adobe | ko | kein animateMotion mit keyPoints |
| Squiggle 1.7 | ko | falscher Endwert, kleinere Genauigkeitsprobleme bei einigen Punkten |
| Opera8.02/50 | ko | nur erstes Pfadfragment verwendet, keyPoints ignoriert |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | keyPoints ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keine Animation des Testbeispiels |
| Adobe | ko | keyPoints ignoriert |
| Squiggle 1.7 | (ok) | kleinere Genauigkeitsprobleme |
| Opera8.02/50 | ko | 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,00 | ko | Falscher Zeitablauf (anhalten und los für beta2 und spätere) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keine Animation des Testbeispiels |
| Adobe | ko | keyPoints ignoriert |
| Squiggle 1.7 | (ok) | kleinere Genauigkeitsprobleme |
| Opera8.02/50 | ko | 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,00 | ko | keyPoints ignoriert |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | ko | kein animateMotion |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 7/8 | 7/10 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| 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 | ko | falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode ignoriert |
| Adobe | ok | - |
| Squiggle 1.7 | ko | 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,00 | ko | falscher Zeitablauf |
| Gecko 2.0 | ko | verwirrt mit path mit vielfachen M/m Kommandos |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode ignoriert |
| Adobe | ko | falscher Zeitablauf |
| Squiggle 1.7 | ko | 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,00 | ko | falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 60.0 | ko | verwirrt mit path mit vielfachen M/m Kommandos |
| Gecko 36.0/ 48.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | zwei Kreise nicht animiert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | komplett verwirrte Bewegungen completely |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falscher Zeitablauf |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | ko | Attribut ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | diskrete Animation |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche oder keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | diskrete Animation |
| Adobe | ko | Attribut ignoriert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | kein animateMotion |
| Squiggle 1.7 | (ok) | kleinere Genauigkeitsprobleme |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falscher letzter Wert |
| Adobe | ko | kein animateMotion |
| Squiggle 1.7 | (ok) | kleinere Genauigkeitsprobleme |
| Opera8.02/50 | ko | kein animateMotion |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | keyPoints und KeyTimes ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | eingefrorener Wert falsch |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 6/7 | 8/9 |
| Gecko 36.0/ 48.0 | 7/7 | 9/9 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | calcMode linear ignoriert |
| Adobe | ko | zwei Kreise nicht animiert |
| Squiggle 1.7 | ok | - |
| 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 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | zwei Kreise nicht animiert |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| 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,00 | ok | Genauigkeit könnte besser sein, Test könnte auch als fehlgeschlagen gewertet werden... |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | horizontale Bewegung diskret |
| Adobe | ko | 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,00 | ok | siehe vorheriges Beispiel |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | keySplines ignoriert |
| Squiggle 1.7 | (ok) | siehe vorheriges Beispiel |
| Opera8.02/50 | ok | 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,00 | ok | siehe vorheriges Beispiel |
| Opera9 beta1 | ko | keySplines ignoriert |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | keySplines für einige Untertests ignoriert |
| Adobe | ko | keySplines ignoriert für from-to, falscher Endwert |
| Squiggle 1.7 | ko | falsche Fehlermeldung, kleinere Genauigkeitsprobleme |
| Opera8.02/50 | ko | Kleinere 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,00 | ko | Ü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.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | Testbeispiel nicht animiert |
| Adobe | ko | keyPoints ignoriert |
| Squiggle 1.7 | (ok) | siehe vorheriges Beispiel |
| Opera8.02/50 | ko | kein animateMotion |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ko | keyPoints ignoriert |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ko | falscher Zeitablauf |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ko | keine Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | kein animateMotion |
| Squiggle 1.7 | ko | falscher Endwert |
| Opera8.02/50 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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/ 60.0 | 6/6 | 7/8 |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsche from-by Animation |
| Squiggle 1.7 | ko | keine Animation, falsche Fehlermeldung |
| Opera8.02/50 | ko | accumulate ignoriert, falsche by Animation |
| Opera9tp1 | ko | keine Animation |
| Opera9tp2 | ko | falsche Animation |
| Opera9beta1 | ko | keine kumulative Animation |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | ko | falsche by Animation |
| Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ok | - |
| Adobe | ko | kleinere Genauigkeitsprobleme |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ko | kleinere 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,00 | ok | - |
| Opera9 beta1 | ko | falsche Animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | nicht cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | ko | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falscher eingefrorener Wert |
| Adobe | ko | falsche Animation, falsche eingefrorene Werte |
| Squiggle 1.7 | ko | 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,00 | ko | falsche eingefrorene Werte |
| Gecko 2.0 | ko | falsche Animation, falsche eingefrorene Werte |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | 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.
| Darstellungsprogramm | Ergebnis | Kommentar |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ko | falsche Animation |
| KSVG1 | ko | keine Animation |
| WebKit 528.16 | ko | falsche Animation |
| Adobe | ko | falsche Animation, falsche eingefrorene Werte |
| Squiggle 1.7 | ko | 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,00 | ko | falsche Animation, falsche eingefrorene Werte |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ko | falsche Animation, falsche eingefrorene Werte |
| Darstellungsprogramm | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| Darstellungsprogramm | SVG tiny 1.1 | SVG 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 |
| Gecko 60.0 | 52/68 | 58/78 |
