Beispiele und Tests zur Animation mit SVG

Animationsattribute

Im Kapitel 'Animierbare Attribute und Eigenschaften' haben wir einfache Animationen für alle Attribute verwendet, nun animieren wir mehr oder weniger einfache Formen in einer ausgeklügelteren Weise und mit speziellen Attributen für Animation.

Identifizierung des Zielelementes, des Zielattributes oder der Zieleigenschaft

Im allgemeinen wird das Zielelement einer Animation mit einem id-Attribut in diesem Element und einem Attribut xlink:href identifiziert, welches dieses Attribut im Animationselement referenziert.
Falls es kein Attribut xlink:href im Animationselement gibt, zielt die Animation auf das Elternelement des Animationselementes. Beides ist bereits in zahlreichen Beispielen in diesem Projekt überprüft worden. Wichtig zu wissen: Der Namensraum für XLink ist erforderlich, wenn Attribute mit xlink:... benutzt werden. Andere Namen statt 'xlink' sind prinzipiell möglich, aber nicht unbedingt zu empfehlen, wenn eine gute Kompatibilität erreicht werden soll.

e2007-12-10-01: §M(1)P
Identifiziere das Zielelement:
Nach 3s wird die Farbe von vier Kreisen auf blau gesetzt. Verschiedene Namensräume für xlink werden gewählt, einer im Element svg, zwei lokal in set-Elementen. Das Prefix xlink ist definiert für xmlns:xlink="http://www.w3.org/1999/xhtml", aber nur zu Testzwecken. Der zentrierte Kreis wechselt die Farbe nicht auf rot, weil der Namensraum nicht paßt. Falls die Farbe bei 3s zu (dunkel)rot wechselt, wird das Prefix falsch interpretiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorkoSVG tiny 1.1; in diesem Falle ist der Validator nicht in der Lage, das modifzierte Prefix zu identifizieren.
Amaya9.51/ 11.3.1kofalsche Animation
KSVG1kofalsche Animation
WebKit 528.16ok -
Adobeok-
Squiggle 1.7kofalsche Animation
Opera8.02/50kofalsche Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2010-04-17-01: §M(1)P
Identifiziere das Zielelement:
Verschiedene Methoden, das Animationszielelement zu identifizieren, einschließlich eines exotischen Falles unüblicher Notation für den Namensraum von XLink.
Alle Rechtecke vergrößern ihre Höhe. Die kleinen blauen haben immer das große rot gefüllte mit dem dunkelblauen Strich zu verdecken.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorkoSVG tiny 1.1; in diesem Falle ist der Validator nicht in der Lage, das modifizierte Prefix zu identifizieren.
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Das Attribut xlink:href identifiziert auch das Zielelement für ein Ereignis, falls kein Fragmentidentifizierer angegeben ist. Zum Beispiel ein Animationselement mit xlink:href="#test" begin="click" bedeutet, daß das Klickereignis auf #test bezogen ist und nicht auf das Elternelement des Animationselementes. Um Idenftifikationsprobleme zu vermeiden, kann der Autor immer einen Fragmentidentifizierer hinzufügen: begin="text.click".

e2007-03-14-01: §IM(1)P
Identifiziere das Ereignisziel:
Finde das Ereignisziel für begin="click" und gegebenem xlink:href einer Animation. Drei blau berandete Kreise können animiert werden. Der Beginn jeder Animation wird mit einem Klick auf den jeweiligen Kreis gestartet. Dieses startet eine Animation des cx dieses Kreises. Falls etwas Rotes sichtbar wird oder die jeweilige Animation nicht mit dem Klick beginnt, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Interaktivität
KSVG1ko falsche Animation, keine Interaktivität
WebKit 528.16ok -
Adobeko falsche Identifikation des Ereignisziels
Squiggle 1.7ok -
Opera8.02/50ko Identifizierung richtig, aber zweite Animation des drunterliegenden roten Kreises nicht gestartet
Opera9tp1/2/ 9.00/9.10ok -
Opera9beta1/2ko keine Interaktivität
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60(ok) geringe Zeitverlaufsgenauigkeit für Ereignisse
Opera11.00/11.60/ 12,00ok -
Opera12,00ko erstes Ereignis für oberen roten drunterliegenden Kreis ignoriert
Gecko 2.0/ 8.0ok -
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

Das Attribute attributeName identifiziert das Zielattribut oder die Zieleigenschaft. Auch dies ist bereits in vielen Beispielen überprüft worden, daher hier nur ein Beispiel mit unüblichen Notationen von Namensräumen. attributeName wird nicht in Kombination mit animateMotion verwendet, siehe den Abschnitt dazu.

e2010-04-18-01: §M(1)P
Identifiziere das Zielattribut:
Verschiedene Methoden, das Animationszielattribut zu identifizieren, einschließlich einiger exotischer Fälle unüblicher Präfixe für die Namensräume von SVG und XLink.
Alle Rechtecke vergrößern ihre Höhe. Die kleinen blauen haben immer das große rot gefüllte mit dem dunkelblauen Strich zu verdecken.
Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorkoSVG tiny 1.1; in diesem Falle ist der Validator nicht in der Lage, das modifizierte Prefix zu identifizieren.
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko Nur übliche Namensräume
Adobeko Nur übliche Namensräume
Squiggle 1.7ko falsche Fehlermeldung
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10ko Nur übliche Namensräume
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0ko falsch und friert ein
Gecko 8.0/ 12.0ko stürzt ab
Gecko 24.0/ 36.0/ 48.0ko falsch

Das Attribut attributeType ist nützlicher in SVG-basic oder -full, aber nicht in SVG-tiny 1.1, weil es da gar kein CSS gibt. Zusammen mit SVG-tiny 1.1 müssen alle Animationen mit dem attributeType CSS ignoriert werden. Für SVG und vermutlich mit dem zukünftigen SVG-tiny 1.2 ist dies anders. Im Arbeitsentwurf SVG-tiny 1.2 ist CSS optional. Wie bereits von HTML+CSS bekannt, überschreibt CSS das HTML, dies ist das gleiche für XMLs wie XHTML oder SVG. Beziehungsweise tragen die XML-Attribute zur CSS-Kaskade bei wie entsprechende CSS-Deklarationen zu Beginn des Autorenstils mit einer Spezifität von 0 eingeordnet.
SMIL beschreibt im Animationsbutterbrotmodell (animation sandwich model; sinngemäß):
"Speziell wird die Animation eines XML-Attributes den Präsentationswert modifizieren, bevor es die Stilvorlagen Kaskade durchläuft, wobei der XML-DOM-Wert als Basis verwendet wird. Animation eines in einer Stilvorlagensprache definierten Attributes und verändert den Präsentationswert nach der Kasade."
und
"Wenn Animation auf eine CSS-Eigenschaft eines einzelnen Elementes angewendet wird, wird der zu animierende Basiswert per (nur lesen) getComputedStyle() auf dieses Element ermittelt. Die durch die Animation erzeugten Werte werden in eine überschreibende Stilvorlage für dieses Element geschrieben, welche über getOverrideStyle() wieder ermittelt werden kann. Diese neuen Werte beeinflussen die Kaskade und spiegeln sich im berechnete Wert wieder (und demnach im einer modifizierten Präsentation). Dies bedeutet, die Animation überschreibt alle Stilvorlagen, mit Ausnahme der Anwenderregeln mit der Eigenschaft !important."
Dieses können wir ausprobieren:

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

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

e2007-02-22-01: §M(1)Q
attributeType:
Für ein blaues Rechteck werden width und height animiert, aber für die Animation von width ist attributeType auf CSS gesetzt. Weil es keine CSS-Eigenschaft width für ein Rechteck gibt, hat dies keinen sichtbaren Effekt, nur die Höhe wird animiert, weil für diese Animation attributeType auf XML gesetzt ist. Die Animation wird mit einem roten, darunterliegenden animierten Rechteck verglichen. Das blaue Rechteck verdeckt das rote immer komplett. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

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

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

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko kein CSS und Animation
KSVG1ko unmittelbarer Absturz bei diesem Beispiel
WebKit 528.16ko keine Animation der font-family
Adobeko keine Animation der font-family
Squiggle 1.7ko keine Animation der font-family, falsche Fehlermeldung
Opera8.02/50ko kein CSS und attributeType ignoriert
Opera9tp1ko attributeType ignoriert
Opera9tp2ko nur das rote Polygon dargestellt
Opera9beta1ko unmittelbarer Absturz bei diesem Beispiel
Opera9beta2/ 9.00/9.10ko attributeType falsch interpretiert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko keine Animation von font-family
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko keine Animation der font-family

e2005-09-22-02: §Q
attributeType:
SVG-tiny 1.1 enthält kein CSS. Doch attributeType der Animation von fill ist CSS. Daher muß die Animation für den gegebenen doctype und dem Profil SVG-tiny 1.1 ignoriert werden. Falls eine rote Animation auftaucht, ist das für SVG tiny 1.1 falsch.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko Attribut ignoriert
KSVG1ko Attribut ignoriert
WebKit 528.16ko Attribut ignoriert
Adobeko Attribut ignoriert
Squiggle 1.7ko Attribut ignoriert
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Attribut ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0(ok) kein animateColor
Testergebnisse für Identifizierung des Zielelementes, des Zielattributes oder der Zieleigenschaft
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 1/8
KSVG1 0/5 0/8
WebKit 528.16 3/5 4/8
Adobe 1/5 4/8
Squiggle 1.7 2/5 2/8
Opera8.02/50 1/5 1/8
Opera9tp1/2 3/5 4/8
Opera9 beta1/2 2/5 3/8
Opera9.00/9.10 3/5 4/8
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 4/5 6/8
Opera12,00 3/5 5/8
Gecko 2.0/ 8.0 4/5 5/8
Gecko 12.0/ 24.0/ 36.0/ 48.0 3/5 4/8

Zeitablauf

Die Sektion Zeitablauf ist verschoben worden. Nutze die gegebene URI.

Angabe von zeitabhängigen Werten in Animationen

Einheiten

Im kompletten Profil von SVG 1.1 können viele Werte mit Einheiten notiert werden. Für das tiny-Profil ist dies nur verfügbar für width und height des Wurzelelementes. Insbesondere, wenn verschiedene Listeneinträge in Wertelisten für Animationen verschiedene Einheiten haben, wird die Interpolation komplizierter.

Werte mit verschiedenen Einheiten können in dasselbe Einheitensystem konvertiert werden, bevor eine kontinuierliche Animation stattfindet - oder der interpolierte Präsentationswert ist eine Kombination von Werten mit verschiedenen Einheiten, die in Werte in Gerätepixeln umgewandelt werden müssen, um dargestellt zu werden.

e2010-07-01-01: §M(1)P
Koordinaten und Längen in cm und mm:
Höhe und Breite des Dokumentes sind als 10 cm angegeben, die Größe der Objekte innerhalb des Dokumentes sind in cm angegeben. Einige Einheiten innerhalb von Animationselementen sind mm. Offenbar ist 1cm das Gleiche wie 10mm.
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur cm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeko Mischung von diskreter und kontinuierlicher Animation
Squiggle 1.7ko Falsche Größe (nicht 10cm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falsche Größe (nicht 10cm)
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-01-02: §M(1)P
Koordinaten und Längen in cm, mm und in:
Höhe und Breite des Dokumentes sind als 10 cm angegeben. Größen der Objekte innerhalb des Dokumentes sind angegeben in cm, mm oder in in (inch, Zoll). Offenbar ist 1cm das Gleiche wie 10mm. in ist keine Standardeinheit. Es ist eine abgeleitete Einheit 1in = 25.4mm.
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur cm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeko diskrete Animation
Squiggle 1.7ko Falsche Größe (nicht 10cm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falsche Größe (nicht 10cm)
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-01-03: §M(1)P
Koordinaten und Längen in absoluten Einheiten:
Höhe und Breite des Dokumentes sind als 10 cm angegeben. Größen der Objekte innerhalb des Dokumentes sind angegeben in cm, mm, in, pc, pt.
Offenbar ist 1cm das Gleiche wie 10mm.
in, pc und pt sind keine Standardeinheiten.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur cm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeko diskrete Animation
Squiggle 1.7ko Falsche Größe (nicht 10cm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Falsche Größe (nicht 10cm)
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-02-01: §M(1)P
Koordinaten und Längen in em und ex:
Die Einheiten em und ex werden getestet mit animierten Kreisen, verglichen mit lokalen und px-Einheiten.
Die Einheit em ist hier mittels font-size auf 10 lokale Einheiten gesetzt und ex ist innerhalb eines Elementes font auf die Hälfte von em gesetzt.
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur px als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Mischung aus diskreter und kontinuierlicher Animation
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60ok -
Opera12,00ko ein falsch dimensionierter Kreis
Gecko 2.0ko falsche Größe, falscher letzter Wert
Gecko 8.0/ 12.0/ 48.0ko falsche Größe
Gecko 24.0/ 36.0ok -

e2010-07-02-02: §M(1)P
Koordinaten und Längen in em und ex:
Die Einheiten em und ex werden getestet mit animierten Kreisen, verglichen mit mm.
Die Einheit em ist hier mittels font-size auf 10mm und ex ist innerhalb eines Elementes font auf die Hälfte von em gesetzt.
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur mm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Mischung aus diskreter und kontinuierlicher Animation
Squiggle 1.7ko Falsche Größe (nicht 100mm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10ko Falsche Größe (nicht 100mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alphako Falsche absolute und relative Größe
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60ko Falsche Größe (nicht 100mm)
Opera12,00ko ein falsch dimensionierter Kreis
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-03-01: §M(1)P
Koordinaten und Längen in Prozenten:
Prozente als Einheiten werden getestet mit animierten Kreisen, verglichen mit lokalen und px-Einheiten.
Weil viewBox auf eine Breite von 400 und eine Höhe von 300 gesetzt ist, entspricht 100% einer horizontalen Länge von 400 und 100% entsprechen einer vertikalen Länge von 300. Andere Längen in anderen Richtungen beziehen sich auf 353.5533905932737622... als 100% (die Wurzel von einhalb mal der Wurzel der Summe der Quadrate von Breite und Höhe).
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur px als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Mischung aus diskreter und kontinuierlicher Animation
Squiggle 1.7ok -
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2ok -
Opera9beta1ko Animation abgebrochen
Opera9beta2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Mischung aus diskreter und kontinuierlicher Animation
Gecko 2.0ko falscher letzter Wert
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2010-07-03-02: §M(1)P
Koordinaten und Längen in Prozenten:
Prozente als Einheiten werden getestet mit animierten Ellipsen, verglichen mit lokalen und px-Einheiten.
Weil viewBox auf eine Breite von 400 und eine Höhe von 300 gesetzt ist, entspricht 100% einer horizontalen Länge von 400 und 100% entsprechen einer vertikalen Länge von 300. Die Attribute rx und ry als auch cx und cy beziehen sich auf diese Längen.
Für die blaue Ellipse sind die Werte der Animationsliste zum Vergleich in grau angegeben, für die dunkelblaue Ellipse gibt es einen roten Vergleich dahinter mit Animation, bei der nur px als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche Animation
Squiggle 1.7ok -
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2ok -
Opera9beta1ko Animation abgebrochen
Opera9beta2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Mischung aus diskreter und kontinuierlicher Animation
Gecko 2.0ko falscher letzter Wert
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2010-07-03-03: §M(1)P
Koordinaten und Längen in Prozenten:
Prozente als Einheiten werden getestet mit animierten Kreisen, verglichen mit mm.
Weil viewBox auf eine Breite von 200mm und eine Höhe von 150mm gesetzt ist, entspricht 100% einer horizontalen Länge von 400 und 100% entsprechen einer vertikalen Länge von 300. Andere Längen in anderen Richtungen beziehen sich auf 176.7766952966368811...mm als 100% (die Wurzel von einhalb mal der Wurzel der Summe der Quadrate von Breite und Höhe).
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur mm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche Animation
Squiggle 1.7ko falsche Größe (nicht 200mm und 150mm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2ko falsche Größe (nicht 200mm und 150mm)
Opera9beta1ko Animation abgebrochen
Opera9beta2/ 9.00/9.10ko falsche Größe (nicht 200mm und 150mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Mischung aus diskreter und kontinuierlicher Animation
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-03-04: §M(1)P
Koordinaten und Längen in Prozenten:
Prozente als Einheiten werden getestet mit animierten Ellipsen, verglichen mit mm.
Weil viewBox auf eine Breite von 200mm und eine Höhe von 150mm gesetzt ist, entspricht 100% einer horizontalen Länge von 400 und 100% entsprechen einer vertikalen Länge von 300. Die Attribute rx und ry als auch cx und cy beziehen sich auf diese Längen.
Für die blaue Ellipse sind die Werte der Animationsliste zum Vergleich in grau angegeben, für die dunkelblaue Ellipse gibt es einen roten Vergleich dahinter mit Animation, bei der nur mm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche Animation
Squiggle 1.7ko falsche Größe (nicht 200mm und 150mm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/ beta1/beta2/ 9.00/9.10ko falsche Größe (nicht 200mm und 150mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Mischung aus diskreter und kontinuierlicher Animation
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-04-01: §M(1)P
Koordinaten und Längen in verschiedenen Einheiten
(das Gleiche mit GET-Parametern):
Die Größe des Dokumentes ist in cm angegeben.
Größen der Objekte innerhalb des Dokumentes sind angegeben in cm, mm, in, pc, pt.
Zusätzlich sind Werte in px, em, ex und in Prozenten angegeben.
Offenbar ist 1cm das Gleiche wie 10mm.
in, pc und pt sind keine Standardeinheiten.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In diesem Falle entspricht 100% einer Länge von 10cm.
Die Einheit em ist hier mittels font-size auf 10mm und ex ist innerhalb eines Elementes font auf die Hälfte von em gesetzt.
Die Erscheinung von px-Werten hängt von der Auflösung ab. Diese ergibt sich aus der Eingabe entweder direkt per GET-Parameter oder mit einem XHTML-Formular. Wenn keine Parameter in der URI gesetzt sind, wird das XHTML-Formular angeboten. Falls das Darstellungsprogramm ein XHTML interpetiert, müssen die Parameter direkt als GET-Parameter angegeben werden:
px ist für Pixel
l ist für die Länge
u ist für die Einheit
Voreinstellung ist ?px=900&l=230&u=mm
Die ist eine typische Auflösung für notebooks.
Ein anderer typischer Parametersatz ist: ?px=99&l=1&u=in
Für den blauen Kreis sind die Werte der Animationsliste zum Vergleich in grau angegeben, für den dunkelblauen Kreis gibt es einen roten Vergleich dahinter mit Animation, bei der nur mm als Einheiten verwendet werden, keine Mischung verschiedener Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko falsche Animation, typisch falsche Auflösung (immer 90dpi angenommen?)
Squiggle 1.7ko typisch falsche Auflösung (immer 96dpi angenommen?)
Opera8.02/50ko keine Animation, immer 96dpi?
Opera9tp1ko komplett falsche Größe, falsche Animation, immer 96dpi?
Opera9tp2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Animation, immer 96dpi?
Gecko 2.0ko falscher letzter Wert, falsche Größe, immer 96dpi?
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe, immer 96dpi?

e2010-07-04-01: §M(1)P
Einheiten für rotate von animateMotion:
Das Attribut rotate von animateMotion kann Winkel als Werte haben, entweder als Zahlen als Winkel in Grad, mit Einheit deg für Grad, grad für Neugrad oder rad für radians. Dies wird mit vier blauen Quadraten mit abgerundeten Ecken getestet. Zum Vergleich gibt es vier rote Quadrate darunter. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

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

e2010-07-05-01: §M(1)P
Additive Animation mit gemischten absoluten Einheiten:
Für einen blauen Kreis gibt es darunter einen roten Vergleich mit Animation, bei der nur cm als Einheiten verwendet werden, keine Mischung von Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko Testkreis nicht angezeigt
Adobeko Testkreis nicht angezeigt
Squiggle 1.7ko falsche Größe (nicht 11cm)
Opera8.02/50ko keine Animation
Opera9tp1ko komplett falsche Größe
Opera9tp2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Größe (nicht 11cm)
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe (nicht 11cm)

e2010-07-05-02: §M(1)P
Additive Animation mit gemischten Einheiten em, ex, mm, cm:
Die Einheit em ist hier mittels font-size auf 10mm und ex ist innerhalb eines Elementes font auf die Hälfte von em gesetzt.
Für einen blauen Kreis gibt es darunter einen roten Vergleich mit Animation, bei der nur mm als Einheiten verwendet werden, keine Mischung von Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Testkreis nicht angezeigt
Squiggle 1.7ko falsche Größe (nicht 10cm)
Opera8.02/50/ 9tp1ko komplett falsche Größe
Opera9tp2ko falsche Größe (nicht 10cm)
Opera9beta1ko Animation abgebrochen
Opera9beta2/ 9.00/9.10ko falsche Größe (nicht 10cm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alphako falsche Größe
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60ko falsche Größe (nicht 10cm)
Opera12,00ko falsch dimensionierter Kreis
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Größe

e2010-07-05-03: §M(1)P
Additive Animation mit gemischten Einheiten Prozente, px und lokale Einheiten:
Weil viewBox auf eine Breite von 400 und eine Höhe von 300 gesetzt ist, entspricht 100% einer horizontalen Länge von 400 und 100% entsprechen einer vertikalen Länge von 300. Andere Längen in anderen Richtungen beziehen sich auf 353.5533905932737622... als 100% (die Wurzel von einhalb mal der Wurzel der Summe der Quadrate von Breite und Höhe).
Für einen blauen Kreis gibt es darunter einen roten Vergleich mit Animation, bei der nur px als Einheiten verwendet werden, keine Mischung von Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
Adobeko Testkreis nicht angezeigt
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko komplett falsche Größe
Opera9tp2/beta1/2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko nicht additiv
Gecko 2.0ko falscher letzter Wert
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2010-07-06-01: §M(1)P
Additive Animationen mit Einheiten
(das Gleiche mit GET-Parametern):
Die Größe des Dokumentes ist in cm angegeben.
Größen der Objekte innerhalb des Dokumentes sind angegeben in cm, mm, in, pc, pt.
Zusätzlich sind Werte in px, em, ex und in Prozenten angegeben.
Offenbar ist 1cm das Gleiche wie 10mm.
in, pc und pt sind keine Standardeinheiten.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In diesem Falle entspricht 100% einer Länge von 10cm.
Die Einheit em ist hier mittels font-size auf 10mm und ex ist innerhalb eines Elementes font auf die Hälfte von em gesetzt.
Die Erscheinung von px-Werten hängt von der Auflösung ab. Diese ergibt sich aus der Eingabe entweder direkt per GET-Parameter oder mit einem XHTML-Formular. Wenn keine Parameter in der URI gesetzt sind, wird das XHTML-Formular angeboten. Falls das Darstellungsprogramm ein XHTML interpetiert, müssen die Parameter direkt als GET-Parameter angegeben werden:
px ist für Pixel
l ist für die Länge
u ist für die Einheit
Voreinstellung ist ?px=900&l=230&u=mm
Die ist eine typische Auflösung für notebooks.
Ein anderer typischer Parametersatz ist: ?px=99&l=1&u=in
Für einen blauen Kreis gibt es darunter einen roten Vergleich mit Animation, bei der nur cm als Einheiten verwendet werden, keine Mischung von Einheiten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko falsche Animation
AdobekoTestkreis nicht angezeigt, falsche Animation, typisch falsche Auflösung (immer 90dpi angenommen?)
Squiggle 1.7ko typisch falsche Auflösung (immer 96dpi angenommen?)
Opera8.02/50/ 9tp1ko komplett falsche Größe, keine Animation, immer 96dpi?
Opera9tp2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falsche Animation, immer 96dpi?
Gecko 2.0ko falscher letzter Wert, falsche Größe
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko typisch falsche Auflösung (immer 96dpi angenommen?)
Testergebnisse für Einheiten
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/15
KSVG1 0/15
WebKit 528.16 0/15
Adobe 1/15
Squiggle 1.7 5/15
Opera8.02/50 1/15
Opera9tp1 1/15
Opera9tp2 6/15
Opera9 beta1 3/15
Opera9 beta2/ 9.00/9.10 5/15
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha 2/15
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60 2/15
Opera12,00 1/15
Gecko 2.0 0/15
Gecko 8.0/ 12.0/ 48.0 4/15
Gecko 24.0/ 36.0 5/15

to

e2005-09-10-01: §M(2)P
Attribut to:
Nach 3s werden die verschiedenen cx-Werte der Kreise mit dem Attribut to auf den gleichen Wert rechts gesetzt. Anfangs- und Endpositionen sind mit grauen Kreisen markiert.

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

e2008-08-27-01: §M(1)P
diskrete to-Animation:
width, stroke-linejoin und fill eines blau gerandeten Rechtecks werden mit einer diskreten to-Animation animiert. width wird nach 2s für 5s vergrößert, wobei explizit calcMode discrete gesetzt ist. fill erbt den unterliegenden Wert none vom elterlichen g, daher wird dies diskret nach 8s für 5s gewechselt. Ein rot gerandetes Rechteck hinter dem blauen hat set-Animationen für width und stroke-linejoin mit demselben Zeitablauf. Ein kleinerer Kreis hat eine set-Animation für fill mit demselben Zeitablauf. Falls etwas Rotes sichtbar wird, oder fill des kleinen Kreises und des Rechtecks unterschiedlich sind, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko kein stroke-linecap und keine Animation
KSVG1 ko falsche oder keine Animation
WekKit 528.16 ko kontinuierliche Animation
Adobeko falscher Zeitablauf
Squiggle 1.7ko falscher Zeitablauf
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko falscher Zeitablauf
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

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

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

e2005-09-10-03: §M(1)P
Attribut to:
Ein Kreis bewegt sich drei mal von links nach rechts, wobei drei Animationen mit dem Attribut to benutzt werden. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang des gegebenen grauen Pfades. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-10-17-01: §M(1)P
Attribut to:
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen für cx verwendet werden und eine einfache für cy. Der Pfad ist zum Vergleich in grau eingezeichnet. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-10-17-02: §M(1)P
eingefrorene to-Animation:
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen für cx verwendet werden und eine einfache für cy. Die Animation für cy und die erste für cx wird zweimal ausgeführt, die zweite für cx nur 1.5 mal. Beachte, daß die zweite Animation auf halben Wege eingefroren wird. Weil sie Priorität hat, wird die gesamte Animation von cx eingefroren. Für die zweite cx-Animation ist accumulate="sum" notiert. Weil to-Animationen immer mit dem drunterliegenden Wert beginnen und mit dem to-Wert enden, kann es keinen sichtbaren kumulativen Effekt geben (Dies ist explizit in SMIL2.0/2.1 erwähnt). Der Pfad ist zum Vergleich in grau eingezeichnet, die dünne Linie für den ersten Durchlauf, die dicke für den zweiten Durchlauf. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko zweite Animation ignoriert
WebKit 528.16ko falsches Verhalten mit eingefrorener Animation im zweiten Umlauf
Adobeko falsches Verhalten mit eingefrorener Animation im zweiten Umlauf
Squiggle 1.7ko falsche Animation
Opera8.02/50ko nicht additiv (Opera bug-185982)
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko wie Adobe nicht eingefroren (Opera bug-185982) und zweite Runde irgendwie kumulativ
Gecko 2.0ko kleineres Genauigkeitsproblem für eingefrorenen Wert
Gecko 8.0/ 12.0/ 24.0ok -
Gecko 36.0/ 48.0ko falsche Animation

e2007-03-11-01: §M(1)P
eingefrorene to-Animation:
Test des korrekten vorgegebenen additiven Verhaltens von to-Animationen. Ein Kreis bewegt sich auf einem quadratischen Pfad, wobei zwei Animationen für cx verwendet werden und eine einfache für cy. Die Animation für cy und die zweite für cx wird zweimal ausgeführt, die erste für cx nur 1.5 mal. Beachte, daß die erste Animation auf halben Wege eingefroren wird. Weil sie niedrigere Priorität hat, überlebt die zweite Animation von cx auf einem geraden Pfad. Für die cy-Animation ist accumulate="sum" notiert. Weil to-Animationen immer mit dem drunterliegenden Wert beginnen und mit dem to-Wert enden, kann es keinen sichtbaren kumulativen Effekt geben (Dies ist explizit in SMIL2.0/2.1 erwähnt). Der Pfad ist zum Vergleich in grau eingezeichnet, die dünne Linie für den ersten Durchlauf, die dicke für den zweiten Durchlauf. Falls das rote Zentrum des Kreises sichtbar wird oder der Kreis verschwindet, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko zweite Animation ignoriert
WebKit 528.16ko falsches Verhalten mit eingefrorener Animation im zweiten Umlauf
Adobeok -
Squiggle 1.7ko falsche Animation
Opera8.02/50ko nicht additiv (Opera bug-185982)
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko zweite Runde kumulativ
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

e2008-03-01-01: §M(1)P
erneut gestartete to-Animation:
Ein Kreis bewegt sich von links nach rechts und zurück nach links und so weiter, wozu zwei Animationen mit dem Attribut to und mit fill freeze und vier Werten für begin verwendet werden. Diese Animationen werden überlagert mit einer einfachen from-to-Animation von oben nach unten. Der sichtbare Effekt ist eine Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.
Weil die zwei Animationen nicht zur selben Zeit aktiv sind, wird der eingefrorene Wert de vorherigen Animation als drunterliegender Wert verwendet. Weil die andere Animation bereits eingefroren ist, bevor eine Animation erneut startet, hat der Neustart keinen Einfluß auf den eingefrorenen Wert der Animation mit niedrigerer Priorität mehr. Der eingefrorene Zustand bewahrt einfach den eigefrorenen Wert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko zweite Animation ignoriert
WebKit 528.16ko falsche Animation
Adobeko eingefrorener Wert nicht gehalten
Squiggle 1.7ko falsche Animation
Opera8.02/50ko nicht additiv (Opera bug-185982)
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko eingefrorener Wert nicht gehalten
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko eingefrorener Wert nicht gehalten

e2008-03-02-01: §M(1)P
erneut gestartete to-Animation:
Ein Kreis bewegt sich von unten nach oben mit einigen Unterbrechungen, wozu zwei Animationen mit dem Attribut to und mit fill freeze und vier Werten für begin verwendet werden. Diese Animationen werden überlagert mit einer einfachen from-to-Animation von links nach rechts. Der sichtbare Effekt ist eine Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.
Weil die zwei Animationen nicht zur selben Zeit aktiv sind, wird der eingefrorene Wert de vorherigen Animation als drunterliegender Wert verwendet. Weil die andere Animation bereits eingefroren ist, bevor eine Animation erneut startet, hat der Neustart keinen Einfluß auf den eingefrorenen Wert der Animation mit niedrigerer Priorität mehr. Der eingefrorene Zustand bewahrt einfach den eigefrorenen Wert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko zweite Animation ignoriert
WebKit 528.16ko falsche Animation
Adobeko eingefrorener Wert nicht gehalten
Squiggle 1.7ko falsche Animation
Opera8.02/50ko nicht additiv (Opera bug-185982)
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko eingefrorener Wert nicht gehalten
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -
Gecko 36.0/ 48.0ko falsche Animation

e2008-03-03-01: §M(1)P
erneut gestartete to-Animation:
Ein Kreis bewegt sich in vertikaler Richtung, wozu zwei Animationen mit dem Attribut to und mit fill freeze und zwei Werten für begin verwendet werden. Diese Animationen werden überlagert mit einer einfachen from-to-Animation von links nach rechts. Der sichtbare Effekt ist eine Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.
Mit dem Neustart wird sich die Priorität der Animationen vertauscht. Beide sind zur selben Zeit aktiv. Wenn die Animation mit niedrigerer Priorität erneut gestartet wird, bekommt sie die höhere Priorität und ist daher nicht mehr drunterliegender Wert der anderen Animation. Diese andere Animation ist nun drunterliegender Wert der Animation mit höherer Priorität.

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

e2006-06-06-30: §M(1)P
nicht additive to-Animation:
to-Animation der nicht additive Eigenschaft stroke-dasharray des blauen Pfades. stroke-dasharray wird in 10s vom unterliegenden Eigenschaftswert 0.1000 nach 1000,0 verändert. Weil pathlength ebenfalls auf 1000 gesetzt ist, bedeutet dies ein kontinuierliches Malen des Pfades von unsichtbar bis komplett sichtbar. Nur zum Vergleich wird stroke-dasharray eines roten Pfades mit den Werte 0,1000;1000,0 animiert. Dieser ist immer vom blauen Pfad bedeckt. Wenn etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

nicht additive to-Animation (zweites Beispiel):
to-Animation des nicht additiven Attributes rotate des Elementes Text. Das Textattribut rotate ändert sich kontinuierlich in 4s von -30 nach 30 für ein '?'. Anfangs- und Endposition sind in grau dargestellt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko Beim ersten Beispiel kein blauer Pfad, keine Animation, stürzt ab, beim zweiten Beispiel nur keine Animation
WebKit 528.16ko keine Animation
Adobeko Beim ersten Beispiel keine Animation, zweites ok
Squiggle 1.7ko Erstes Beispiel: diskrete Animation, falsche pathLength? Zweites Beispiel: falsche Fehlermeldung, keine Animation
Opera8.02/50ko falsche Darstellung, keine Animation
Opera9tp1ko kleinere Probleme bei am Beginn von Beispiel 1, falsche Animation bei Beispiel 2
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9.00/9.10koErstes Beispiel: keine Anzeige in 9.00, nach 10s roter Pfad sichtbar; zweites Beispiel: Animation falsch
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 (ok) (kleineres Genauigkeitsproblem für den Strich im ersten Beispiel)

e2006-06-30-01: §M(2)P
nicht additive to-Animation (drittes Beispiel):
Das Textattribut rotate ändert sich für ein blaues '?'. Anfangs- und Endposition sind in grau dargestellt.
Die erste SMIL Animationsempfehlung war zweideutig bezüglich der to-Animationen für nicht additive attribute, allerdings ist dies in SMIL 2 und 3 in solcher Weise geklärt worden, daß to-Animationen nicht von der Frage abhängen, ob das Attribut additiv ist oder nicht. Effektiv ist es nur notwendig, daß es möglich ist, zwischen Werten zu interpolieren.
Ein anderes rotes '?' wird mit einer einfacheren Animation mit dem selben sichtbaren Effekt animiert. Der Testfall hat dies immer zu verdecken. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

nicht additive to-Animation (viertes Beispiel):
to-Animation des nicht additiven Attributes d des blauen Pfades. Der graue Pfad zeigt die Trajektorie des kreisähnlichen blauen Pfades.
Die erste SMIL Animationsempfehlung war zweideutig bezüglich der to-Animationen für nicht additive attribute, allerdings ist dies in SMIL 2 und 3 in solcher Weise geklärt worden, daß to-Animationen nicht von der Frage abhängen, ob das Attribut additiv ist oder nicht. Effektiv ist es nur notwendig, daß es möglich ist, zwischen Werten zu interpolieren.
Der graue Pfad verdeckt den kleineren roten kreisähnlichen Pfad mit der gleiche Animation. Falls das blaue Objekt nicht dem grauen Pfad folgt oder etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko diskrete Animation
Adobeok -
Squiggle 1.7ko Erstes Beispiel: falsche Fehlermeldung, keine Animation; zweites Beispiel: falsche Animation
Opera8.02/50ko drittes Beispiel: falsche Anzeige, keine Animation; viertes Beispiel keine to-Animation
Opera9tp1kofalsche Animation; viertes Beispiel: ok
Opera9tp2/ beta1/2ok -
Opera9.00/9.10koAnimation diskret, nur letzten Wert dargestellt
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -
Testergebnisse für to
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/12 0/12
KSVG1 1/12 1/12
WebKit 528.16 5/12 5/12
Adobe 7/12 7/12
Squiggle 1.7 2/12 2/12
Opera8.02/50 2/12 2/12
Opera9tp1 4/12 4/12
Opera9tp2/ beta1/2 7/12 7/12
Opera9.00/9.10 5/12 5/12
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/12 7/12
Gecko 2.0 10/12 10/12
Gecko 8.0/ 12.0/ 24.0 11/12 11/12
Gecko 36.0/ 48.0 9/12 9/12

by

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

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

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

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

from

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

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

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

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

values

e2005-09-10-08: §M(2)P
Attribut values:
Ein Kreis wird für 5s von links nach rechts mit einem Wert im Attribut values gesetzt. Die Anfangsposition ist mit einem dunkelgrauen Kreis gekennzeichnet, die Endposition ist mit einem hellgrauen Kreis gekennzeichnet.

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

e2005-09-10-09: §M(2)P
Attribut values:
Ein kleiner Kreis wird um den größeren mit verschiedenen Werten rotiert. Die Werte sind mit grauen Kreisen markiert, deren Ränder als Zeitmarken breiter werden und deren Radien als Zeitmarken kleiner werden.

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

e2005-09-10-10: §UQ
Attribut values:
Zufälliges Beispiel für einen Foucaultschen Pendel.
PHP wird lediglich zur zufälligen Auswahl und zur Berechnung der Interpolationspunkte bemutzt. Die Ausgabe ist ein zufälliges SVG tiny 1.1.

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

e2005-09-10-11: §UQ
Attribute values:
Animation eines harmonsichen Oszillators in drei Dimensionen (zufällige Lissajous-Figuren).
PHP wird lediglich zur zufälligen Auswahl und zur Berechnung der Interpolationspunkte bemutzt. Die Ausgabe ist ein zufälliges SVG tiny 1.1.

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

e2005-09-10-12: §M(1)P
Attribut values:
cx eines Kreises wird mit den Werten 100; 900; 900; 100 und einer Dauer von 10s animiert.
Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-10-13: §Q
Attribut values:
Die Farbe des großen Kreises wird mit verschiedenen Attributen animiert: #ff0;#0f0;#0ff;#00f;#f0f;#f88;#ff0.

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

e2007-01-31-01: §M(1)P
values und Prioritätsregeln:
Ein Kreis wird von links nach rechts in 5s mit dem Attribute values bewegt, dies überschreibt die zusätzlich gegebenen Attribute from, to, by. Nach 5s wird eine andere Animation für 5s von oben nach unten gestartet, wobei from und to verwendet wird. dies überschreibt das zusätzlich gegebene by. Der Pfad ist mit grauen Linien angegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Prioritätsregeln
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -
Testergebnisse für values
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/7
KSVG1 0/7 0/7
WebKit 528.166/7 6/7
Adobe 7/7 7/7
Squiggle 1.7 6/7 6/7
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 7/7 7/7
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0 6/7 6/7
Gecko 24.0 5/7 5/7

calcMode

calcMode linear

e2007-04-01-01: §M(1)P
calcMode linear:
cx eines Kreises wird mit den Werten 100; 500; 200; 900; 900; 500; 200; 700; 800; 100 und einer Dauer von 30s animiert.
Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Pfad. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-10-33: §Q
Attribut calcMode:
Ein kleiner Kreis wird um einen großen mit verschiedenen Werten rotiert. Die Farbe des großen Kreises wird mit verschiedenen Grauwerten animiert. Für beide ist calcMode linear. Das bedeutet, die Zeit ist für jedes Intervall zwischen zwei Werten die gleiche - weil die Werte verschiedene Differenzen haben, sind die Geschwindigkeiten unterschiedlich.

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

e2005-09-10-34: §Q
Attribut calcMode:
Ein kleiner Kreis wird um einen großen mit verschiedenen Werten für die Rotation und das Rotationszentrums mit calcMode linear rotiert.

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

calcMode discrete

e2005-09-10-32: §M(1)P
Attribut calcMode:
cx eines Kreises wird in 10s diskret mit einigen Werten von links nach rechts animiert. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-10-36: §M(1)P
set und calcMode discrete vergleichen:
values animate mit calcMode discrete wird mit set-Animationen verglichen. Ein roter Kreis mit wird in verschiedenen Schritten alle 3s von links nach rechts gesetzt. Ein blauer Kreis bedeckt den roten und wird mit calcMode discrete gerade so animiert, daß es die identische Bewegung ergibt. Daher ist der blaue Kreis immer perfekt auf dem roten zentriert, der nie sichtbar wird.

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

e2008-03-14-11: §M(1)P
set und calcMode discrete vergleichen:
from-to, from-by und by animate mit calcMode discrete wird mit set-Animationen verglichen. Ein roter Kreis mit wird in verschiedenen Schritten alle 4s von links nach rechts gesetzt. Ein blauer Kreis bedeckt den roten und wird mit calcMode discrete gerade so animiert, daß es die identische Bewegung ergibt. Daher ist der blaue Kreis immer perfekt auf dem roten zentriert, der nie sichtbar wird.

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

e2005-09-10-38: §P
Farben und calcMode discrete:
Die Farbe eines Kreises wird mit den Werten gelb, grün, cyan, blau, magenta und orange animiert. calcMode ist discrete, was zu einer diskreten Animation Schritt für Schritt führt. stroke wird mit den gleiche Farben mit set-Animationen verändert. Der sichtbare Effekt besteht darin, daß es keinen Unterschied zwischen fill und stroke gibt.

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

calcMode paced

e2007-01-19-01: §M(1)P
calcMode paced:
cx und cy eines blauen Kreises werden mit calcMode paced animiert. Für einen Präzisionsvergleich gibt es auch eine einfach lineare Animation eines roten Kreises. Falls die Animation des blauen Kreises korrekt ist, wird der rote Kreis nicht sichtbar. Falls der rote sichtbar wird, ist ein Fehler aufgetreten.

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

e2007-01-19-02: §M(1)PS
animateTransform, calcMode paced:
Eine gleichförmige Translation mit animateTransform wird mit einer Simulation verglichen, welche den Euklidischen Abstand verwendet, um den Zeitablauf festzulegen, zudem auch noch mit einer animateMotion. Alle Animationen verwenden Werte, welche mit einem grauen Dreieck und mit dünnen schwarzen Quadraten gekennzeichnet sind. Die animierten Quadrate, blau für den Test, rot für die Simulation, dunkelrot für animateMotion, müssen zwischen den drei schwarzen Quadraten interpolieren. Das blaue Testbeispiel muß die roten Vergleiche komplett verdecken. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Die Spezifikation für SVG 1.1 beschreibt noch ein anderes Verhalten, im Widerspruch zu dem Verhalten, welches für calcMode paced in SVG 1.1 und SMIL spezifiziert ist. Dieses Verhalten interpoliert nicht zwischen den gegebenen Werten und ist daher falsch. Es wird durch ein hellrotes Quadrat simuliert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine oder falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok paßt zu calcMode paced
Adobeok paßt zu calcMode paced
Squiggle 1.7ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, der Grund ist, daß das Verhalten so falsch umgesetzt wird, wie es bereits in der Spezifikation beschrieben ist.
Opera8.02/50/ 9tp1ko keine Animation oder Anzeige
Opera9tp2/ beta1/beta2/ 9.00/9.10ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, die Ursache ist, daß das Verhalten realisiert wurde, welches bereits in der Spezifikation falsch beschrieben wurde.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok paßt zu calcMode paced
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok paßt zu calcMode paced

e2007-01-19-03: §M(1)PS
animateTransform scale, calcMode paced:
Eine gleichförmige Skalierung mit animateTransform für ein blaues Rechteck wird mit einer Simulation für ein rotes Rechteck verglichen, bei der der Euklidische Abstand verwendet wird, um den Zeitablauf zu bestimmen, zudem mit einer animateMotion der Ecken des Rechteckes als orange Kreise. In hellrot wird das Verhalten wie in SVG 1.1 spezifiziert simuliert. Alle Animationen verwenden Werte, die mit dünnen blauen Rechtecken angegeben sind. Die animierten Rechtecke müssen zwischen den drei schwarzen Rechtecken interpolieren. Das blaue Testbeispiel muß die roten oder orangen Vergleiche komplett verdecken, damit eine gleichförmige und interpolierende Animation vorliegt. Falls etwas Rotes oder Oranges sichtbar wird, ist ein Fehler aufgetreten, verglichen mit der Definition von calcMode paced. Zu beachten ist, daß die Simulation des Verhaltens, welches in SVG 1.1 spezifiziert ist, nicht zur Bedeutung der Definition von calcMode paced paßt, wie es in SVG 1.1 und SMIL spezifiziert ist. Das Verhalten nach SVG 1.1 ist eine gleichförmige Animation, interpoliert aber nicht zwischen den Werten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine oder verwirrte Animation
KSVG1ko keine Animation
WebKit 528.16ok paßt zu calcMode paced
Adobeko falsche Animation
Squiggle 1.7ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, der Grund ist, daß das Verhalten so falsch umgesetzt wird, wie es bereits in der Spezifikation beschrieben ist.
Opera8.02/50/ 9tp1ko keine oder falsche Animation oder Anzeige
Opera9tp2/ beta1/beta2/ 9.00/9.10ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, die Ursache ist, daß das Verhalten realisiert wurde, welches bereits in der Spezifikation falsch beschrieben wurde.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60ko falsche Animation
Opera11.00/11.60/ 12,00ok paßt zu calcMode paced
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok paßt zu calcMode paced

e2005-09-10-31: §M(1)P
Attribut calcMode paced:
Ein kleiner blauer Kreis wird um einen großen mit verschiedenen Werten rotiert. Die Dauer der Animation 30s und der calcMode paced, was eine Rotation mit konstanter Winkelgeschwindigkeit ergibt. Für einen Präzisionsvergleich gibt es auch einen kleinen roten Kreis mit einer einfachen from-to-Animation. Falls die Animation des kleinen blauen Kreises korrekt ist, wird der rote nicht sichtbar werden. Falls der rote sichtbar ist, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine oder falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko keine Animation, nur teilweise oder keine Anzeige
Opera8.02/50ko keine paced-Animation
Opera9tp1/2/ beta1ko keine paced-Animation, keine Anzeige des so animierten Kreises
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

e2007-01-19-04: §M(2)PS
animateTransform rotate, calcMode paced:
Eine gleichförmige Rotation mit animateTransform wird für ein Quadrat getestet: Interpoliert die Animation zwischen den gegebenen Werten? Ist es eine gleichförmige Animation zwischen den gegebenen Werten? Die roten und blauen Testbeispiele haben die gegebenen Werte zu treffen, die durch graue Quadrate gekennzeichnet sind. Wenn nicht alle Werte getroffen werden, ist ein Fehler aufgetreten. In SVG 1.1 ist eine Methode erwähnt, um eine gleichförmige Animation zu erhalten. Aber diese Methode interpoliert nicht zwischen den gegebenen Werten, gewährleistet aber eine gleichförmige Animation. Weil der Wert aus eine Winkel und zwei Koordinaten zusammengesetzt ist, vermute ich, daß es keine Idee einer Entfernung gibt, die konsistent mit der Definition von calcMode paced ist, weil Winkel und Koordinate verschiedene Einheiten haben mit komplett unterschiedlicher Bedeutung. Trotzdem, sofern die Animation gleichförmig ist, wird das blaue Quadrat immer das rote verdecken.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko interpolatiert, aber nicht gleichförmig
Adobeko interpolatiert, aber nicht gleichförmig
Squiggle 1.7ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, der Grund ist, daß das Verhalten so falsch umgesetzt wird, wie es bereits in der Spezifikation beschrieben ist.
Opera8.02/50/ 9tp1kokeine oder falsche Animation oder Anzeige
Opera9tp2/ beta1/beta2/ 9.00/9.10ko interpoliert nicht zwischen den gegebenen Werten wie erforderlich für calcMode paced, die Ursache ist, daß das Verhalten realisiert wurde, welches bereits in der Spezifikation falsch beschrieben wurde.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60ko falsche Animation
Opera11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

e2005-09-10-37: §P
animateColor mit Attribut calcMode paced:
Die Farbe eines Kreises wird mit verschiedenen zufälligen Werten animiert. Die Dauer der Animation 10s und der calcMode paced. Die Farbe des Randes wird zwischen den gleichen Werten und passenden keyTimes animiert , so daß er immer die gleiche Farbe wie die Füllung hat.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko fill falsche Farbe
WebKit 528.16ok -
Adobeko fill nicht paced
Squiggle 1.7ko fill nicht paced
Opera8.02/50ko keine Animation für fill
Opera9tp1/2/ beta1ko keine Animation für fill, nur der Anfangswert
Opera9 beta2ok-
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko manchmal falscher Endwert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko kein animateColor

calcMode spline

e2005-09-10-35: §Q
Attribut calcMode:
Ein kleiner Kreis wird um einen großen mit verschiedenen Werten rotiert. Die Farbe des großen Kreises wird mit verschiedenen Grauwerten animiert. Für beide ist calcMode spline, doch es sind keine keyTimes angegeben. Dies bedeutet, die Zeit für jedes Wertintervall ist die gleiche - weil die Werte verschiedene Differenzen haben, ist die Geschwindigkeit unterschiedlich.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -
Testergebnisse für calcMode
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/14 0/14
KSVG1 0/14 0/14
WebKit 528.16 12/14 12/14
Adobe 10/14 10/14
Squiggle 1.7 9/14 9/14
Opera8.02/50 6/14 6/14
Opera9tp1 5/14 5/14
Opera9tp2/ beta1 8/14 8/14
Opera9 beta2/ 9.00/9.10 10/14 10/14
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 11/14 11/14
Opera11.00/11.60/ 12,00 13/14 13/14
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 13/14 13/14

keyTimes

e2005-09-11-01: §Q
Attribut keyTimes:
Drei Kreise bewegen sich von links nach rechts, zwei davon mit values und keyTimes mit steigender Geschwindigkeit. Der rote hat äquidistante Werte und nicht äquidistante keyTimes, für den blauen sind beide nicht äquidistant. Nur zum Vergleich zeigt der gelbe Kreis eine Bewegung mit konstanter Geschwindigkeit.

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

e2005-09-11-02: §Q
Attribut keyTimes:
Drei Kreise bewegen sich mit einer diskreten Animation von links nach rechts, zwei davon werden mit values und keyTimes schneller. Der rote hat äquidistante Werte und nicht äquidistante keyTimes, für den blauen sind beide nicht äquidistant. Nur zum Vergleich zeigt der gelbe Kreis eine Bewegung mit konstanten Schritten.

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

e2005-09-11-03: §UA
Attribut keyTimes:
Animation eines zufälligen Doppelsternsystems mit values und keyTimes. Klassische Näherung einer Bewegung mit Gravitationswechselwirkung.
PHP wird lediglich zur zufälligen Auswahl und zur Berechnung der Interpolationspunkte bemutzt. Die Ausgabe ist ein zufälliges SVG tiny 1.1.

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

e2005-09-11-04: §UA
Attribut keyTimes:
Gravitative Streuung mit zufälligen Teilchen. Klassische Näherung einer Bewegung mit Gravitationswechselwirkung.
PHP wird lediglich zur zufälligen Auswahl und zur Berechnung der Interpolationspunkte bemutzt. Die Ausgabe ist ein zufälliges SVG tiny 1.1.

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

e2006-02-09-01: §M(1)P
Attribut keyTimes und diskrete Animation:
cx eines Kreises wird in 10s diskret mit einigen Werten und keyTimes von links nach rechts animiert. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2006-02-09-02: §P
Attribut keyTimes und diskrete animateColor:
Die Farbe eines Kreises wird mit den Werten gelb, grün, cyan, blau, magenta und orange animiert. calcMode ist discrete, was zu einer diskreten Animation Schritt für Schritt mit keyTimes führt. stroke wird mit den gleiche Farben mit set-Animationen verändert. Der sichtbare Effekt besteht darin, daß es keinen Unterschied zwischen fill und stroke gibt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation für fill
KSVG1ko falsche oder keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko kleinere Genauigkeitsprobleme
Opera8.02/50ko falsche Zeiteinteilung
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko kein animateColor

e2006-02-09-03: §M(1)P
Attribut keyTimes und lineare Animation:
cx eines Kreises wird in 10s linear mit einigen Werten und keyTimes von links nach rechts animiert. Diese Animationen werden mit einer einfachen from-to-Animation von oben nach unten überlagert. Der sichtbare Effekt besteht in einer Bewegung entlang der gegebenen grauen Polylinie. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine cx-Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -
Testergebnisse für keyTimes
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/7
KSVG1 0/7 0/7
WebKit 528.16 5/7 5/7
Adobe 7/7 7/7
Squiggle 1.7 6/7 6/7
Opera8.02/50 6/7 6/7
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 7/7 7/7
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 6/7 6/7

keySplines

e2005-09-11-05: §Q
Attribut keySplines:
Vier Kreise bewegen sich innerhalb von 30s von links nach rechts, alle mit calcMode spline, values, keyTimes und keySplines. Die gleichen keySplines werden in den Beispielen der Spezifikation verwendet. Der gelbe zeigt die Voreinstellung mit konstanter Geschwindigkeit oder keiner Beschleunigung. Der rote beginnt mit kleiner Beschleunigung und endet mit kleiner Abbremsung und ist nach 15s am schnellsten. Magenta beginnt mit größer Beschleunigung und endet mit kleiner Beschleunigung und hat die höchste Geschwindigkeit bei 0s. Der blaue beginnt mit einer sehr kleinen Beschleunigung und endet mit Beschleunigung null und hat die höchste Geschwindigkeit später als 15s.
Nur zur Orientierung in Raum und Zeit wird nach 15s eine zentrierte vertikale Linie eingeblendet.

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

e2005-09-11-06: §M(1)PU
Attribut keySplines:
Eine Bewegung mit konstanter Kraft, zum Beispiel in einem Gravitationsfeld der Erde dicht über der Oberfläche (nicht im Weltraum und ohne Reibung), kann exakt simuliert werden mit calcMode spline, values, keyTimes und keySplines. Die Trajektorie ist eine Parabel, hier unabhängig exakt als eine quadratische Bezierkurve realisiert, um einen Präzisionstest der spline-Animation des blauen Kreises mit rotem Zentrum zu ermöglichen. Der rote Teil ist exakt hinter dem grauen Pfad zentriert und nicht sichtbar, wenn die Animation korrekt ist. Die Animation ist eine Superposition zweier unabhängiger Bewegungen - eine horizontale Bewegung mit konstanter Geschwindigkeit und eine vertikale Bewegung mit konstanter Beschleunigung und einer Anfangsgeschwindigkeit ungleich null.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok Genauigkeit könnte besser sein.
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok Die Genauigkeit könnte besser sein. Wie in der SVG-tiny-Spezifikation erwähnt, sollten Abweichungen unter 1px liegen, hier liegen sie aber klar drüber, ist aber immer noch gut genug für viele Anwendungen.
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0 ok -
Gecko 24.0ko Kreis verschwindet

e2007-05-12-21: §M(1)PU
Attribut keySplines:
Das cy eines blau gerandeten Kreises wird mit sechs verschiedenen values-Animationen, calcMode spline und keySplines animiert. cx wird linear animiert, um zweidimensionale Trajektorien zu erhalten.
Die sich ergebenden Trajektorien werde innerhalb der aktiven Dauer als graue Pfade dargestellt. Diese Pfade verdecken die rote Füllung des Kreises immer komplett.
Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.
Der Zeitablauf der cx-Animationen ist so gewählt, daß die keySplines direkt mit einem kubischen Pfad korrespondieren. Die keySplines-Werte müssen nur mit den entsprechenden Werten multipliziert werden, um den Pfad zu bekommen.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok Genauigkeit könnte besser sein, ist aber bereits besser als mit Opera.
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Genauigkeit der Interpolation mit keySplines ist zu schlecht, offensichtlich werden dafür nur lineare Segmente verwendet, nicht wirklich kubische splines. Die Interpolation sieht in 8 etwas besser aus als in 9, dafür zittert 8, 9 nicht.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

e2005-09-11-07: §PU
Attribut keySplines Vergleich mit und ohne and
Attribut keySplines Vergleich mit und ohne keySplines-Animation, aber mit vielen Interpolationspunkten:
Ein harmonischer Oszillator wird für einen Vergleich zwischen linearer Animation mit verschiedenen Werten und einer spline-Animation mit verschiedenen Werten genutzt. Beides kann eine Näherung für eine harmonische Bewegung sein.
Gelb: ohne keySplines
Blau: mit keySplines
Grünes Rechteck: exakte harmonische Oszillation repräsentiert durch eine Rotation
Verfügbare Parameter:
dur - Animationszeit in Sekunden
anz - Interpolationspunkte Werte mit keySplines: von 0 bis 2 anz
num - Interpolationpunkte Werte ohne keySplines: von 0 bis 2 num
Das erste Beispiel zeigt die gleiche Anzahl von Animationspunkten für die spline- und die lineare Animation. Die Übereinstimmung wird schlecht sein. Das zweite Beispiel verwendet viel mehr Animationspunkte für die lineare Animation. In diesem Falle sind die Animationen mit und ohne splines nahezu die gleichen.
Andere Beispiele sind mit den angegebenen Parametern in der URI verfügbar.

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

e2005-09-11-08: §AI
keySplines-Tester:
Visualisation von keySplines und stetig differenzierbarer Fortsetzung two keySplines:
Der Tester schlägt eine Animationsfortsetzung mit stetig differenzierbarer Geschwindigkeit vor. Es wird überprüft, ob zwei Segmente des keySplines zusammenpassen. Diese werden als Graphik gezeigt. Der Ursprung der Zeit ist links, rechts das Ende der Animation, der minimale Wert ist unten, der maximale oben.
Die schwarze Kurve repräsentiert die eingegebenen keySplines, die rote ist die stetig differenzierbare Fortsetzung vom ersten zum zweiten Teil. Magenta ist die stetig differenzierbare Fortsetzung vom zweiten Teil zum ersten.
Der blaue Knopf startet drei Animationen entsprechend zu den Kurven. Die Vorschläge sind eine kurze Zeit verzögert.
Parameter des PHP-skripts können in der URI geändert werden, die Notation entspricht der SVG-Notation, Beispiel:
dur=30
values=0;-360;360
keyTime=.6 (dies ist nur die mittlere keyTime, die erste ist 0 und die letzte ist 1)
keySplines=.2,0,0.5,1;.1,0,0,1

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

e2005-10-18-12: §Q
Attribut keySplines mit from und to:
Vier Kreise bewegen sich innerhalb von 30s von links nach rechts, alle mit calcMode spline, from/to/by und keySplines. Die gleichen keySplines werden in der Spezifikation verwendet. Gemäß der SMIL-Empfehlung können die damit korrelierten keyTimes vom Darstellungsprogramm durch die values berechnet werden. Der gelbe ist die Voreinstellung mit konstanter Geschwindigkeit oder ohne Beschleunigung. Der rote beginnt mit kleiner Beschleunigung und endet mit kleiner Abbremsung und ist nach 15s am schnellsten. Magenta beginnt mit größer Beschleunigung und endet mit kleiner Beschleunigung und hat die höchste Geschwindigkeit bei 0s. Der blaue beginnt mit einer sehr kleinen Beschleunigung und endet mit Beschleunigung null und hat die höchste Geschwindigkeit später als 15s.
Nur zur Orientierung in Raum und Zeit wird nach 15s eine zentrierte vertikale Linie eingeblendet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keyTimes und keySplines ignoriert, keine Animation für den blauen Kreis
WebKit 528.16ko keySplines ignoriert
Adobeko keySplines ignoriert
Squiggle 1.7ok -
Opera8.02/50ko keine Animation
Opera9tp1/2/ beta1ko keySplines ignoriert
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 ok -

e2006-08-13-11: §Q
animateColor und keySplines:
animateColor mit keyTimes und keySplines für fill des Hintergrundrechteckes und eines Kreises mit einer Dauer von 20s mit Wiederholung. Falls etwas Rotes sichtbar wird oder falls stroke des Kreises sich nicht vom fill unterscheidet, ist ein Fehler aufgetreten. Wenn der Hintergrund immer die gleiche Farbe wie stroke oder fill hat, ist ebenfalls ein Fehler aufgetreten. Alle Animationen sind im blauen Bereich.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko nette farbfreudige Fehler ;o)
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko kein animateColor
Testergebnisse für keySplines
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/7
KSVG1 0/7 0/7
WebKit 528.16 5/7 5/7
Adobe 7/7 7/'7
Squiggle 1.7 7/7 7/7
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 6/7 6/7
Gecko 2.0/ 8.0/ 12.0/ 24.0 5/7 5/7
Gecko 36.0/ 48.0 6/7 6/7
Testergebnisse für die zeitabhängige Angabe von Werten in Animationen
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/51 0/51
KSVG1 1/51 1/51
WebKit 528.16 37/51 37/51
Adobe 42/51 42/51
Squiggle 1.7 33/51 33/51
Opera8.02/50 30/51 30/51
Opera9tp1 33/51 33/51
Opera9tp2/ beta1 39/51 39/51
Opera9 beta2 41/51 41/51
Opera9.00/9.10 39/51 39/51
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 42/51 42/51
Opera11.00/11.60/ 12,00 44/51 44/51
Gecko 2.0 44/51 44/51
Gecko 8.0/ 12.0/ 24.0 49/51 49/51
Gecko 36.0/ 48.0 48/51 48/51

Additive Animation

e2007-06-12-01: §M(1)P
additive und accumulative:
Vergleich von from-to, from-by und by animate mit values animate.
SMIL spezifiziert, daß from-to-, from-by- und by-Animationen dieselben sein müssen wie die entsprechenden values-Animationen.
Zusätzlich können auch set-Animationen durch values-Animationen ersetzt werden. 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"
set to="a" ... values="a" additive="replace" accumulate="none"
(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.)
Die from-to-, from-by- und by-Animationen angewendet auf die Attribute x, y, width und height der blauen Rechtecke werden mit den entsprechenden values-Animationen einschließlich additivem und kumulativem Verhalten für das unterliegende rote Rechteck verglichen. Ein zusätzliches dunkelrotes Rechteck simuliert das gleiche Verhalten, wobei immer additive replace und accumulate none verwendet wird. Die blauen Rechtecke verdecken alle roten Rechtecke. Daher ist ein Fehler aufgetreten, wenn etwas Rotes sichtbar wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche oder keine Animation
KSVG1ko falsche oder keine Animation
WebKit 528.16ko falsche Animation
Adobeko from-by immer kumulativ
Squiggle 1.7ko keine Animation, mysteriöse Fehlermeldungen wegen des Attributes values mit nur einem einzigen Wert
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ko falsche by-Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko falsche Endwerte

additive

Additive Animation bedeutet, die Animation wird zum Anfangswert addiert. Falls mehr als eine Animation auf ein Attribut angewendet wird, wird die additive Animation auch dort dazu addiert.
Im allgemeinen bedeutet additiv die Superposition von Bewegungen.

e2005-09-12-01: §M(1)P
Additive Rotation:
Ein kleiner Kreis wird um einen großen Kreis mit konstanter Geschwindigkeit und einer Dauer von 60s und mit Wiederholung rotiert. Nach 15s wird eine zweite Animation mit dem Attribut additive überlagert. Die Animation hat verschiedene Werte und die wiederholte Dauer ist 120s. Nur zum Vergleich hat ein roter Kreis die gleiche Bewegung, aber mit einer zusätzlichen verschachtelten und animierten Gruppe. Wird der rote Kreis sichtbar, ist ein Fehler aufgetreten.

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

e2007-03-25-01: §M(1)P
Additive Rotation:
Ein kleines Quadrat wird entlang eines Kreises mit konstanter Winkelgeschwindigkeit und einer Dauer von 60s und Wiederholung rotiert. Eine zweite Animation wird überlagert, um das Quadrat in solcher Weise um den eigenen Mittelpunkt zu rotieren, daß die Kanten des Quadrates immer horizontal beziehungweise senkrecht ausgerichtet sind. Nur zum Vergleich hat ein rotes Quadrat die gleiche Bewegung, welche aber mit einer zusätzlichen verschachtelten und animierten Gruppe realisiert wird. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Ein hellgrauer Kreis kennzeichnet den Bewegungspfad des Mittelpunktes des Rechtecks, die dunkleren Kreise kennzeichnen Bereiche für die Ecken beziehungsweise Kanten der Quadrate.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation, falsche Größe des Quadrates
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko blaues Quadrat nicht animiert
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-12-02: §M(1)P
Attribut additive:
Ein kleiner Kreis wird mit konstanter Winkelgeschwindigkeit und einer Dauer von 60s und mit Wiederholung um den Mittelpunkt des Dokumentes rotiert. Eine zweite Animation mit Skalierung wird mit dem Attribut additive überlagert. Die Animation hat verschiedene Werte und die wiederholte Dauer ist 120s. Mit dieser Methode ist es möglich, verschiedene Typen von Transformationen beim gleichen Attribut transform anzuwenden. Nur zum Vergleich hat ein rotes Quadrat die gleiche Bewegung, welche aber mit einer zusätzlichen verschachtelten und animierten Gruppe realisiert wird. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-12-03: §M(1)P
additive diskrete Animation:
Ein Kreis springt von links nach rechts und zurück, wobei zwei additive diskrete Animationen mit Dauern von 8s und und einer Diffenz in der Startzeit von 2s verwendet werden. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-12-04: §M(1)P
additive diskrete Animation:
Ein Kreis springt von links nach rechts und zurück, wobei zwei additive diskrete Animationen mit Dauern von 8s und einer Liste für begin mit 0s (hellgrauer Pfad) und 2s (grauer Pfad). Die graue Animation überschreibt die hellgraue, unabhängig vom Attribut additive. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
webKit 528.16ko Animation nicht diskret
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko ignoriert zweiten Listenwert für begin
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-12-05: §M(1)P
additive Animation:
Ein Kreis bewegt sich von links nach rechts und zurück, wobei zwei additive diskrete Animationen mit Dauern von 6s und einer Liste für begin mit 0s (hellgrauer Pfad) und 3s (grauer Pfad). Die graue Animation überschreibt die hellgraue, unabhängig vom Attribut additive. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko falsche Animation
webKit 528.16ko kleineres Problem mit dem Zeitablauf
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko ignoriert zweiten Listenwert von begin
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-12-06: §M(1)P
additive Animation:
Ein Kreis bewegt sich von links nach rechts und zurück, wobei zwei additive diskrete Animationen mit Dauern von 3s und 4s verwendet werden. Die erste startet nach 3s, die zweite nach 8s. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2006-05-13-11: §M(1)P
ersetztes animateTransform:
Ein blauer Kreis wird in 5s von klein nach groß skaliert, wobei animateTransform mit from und to verwendet wird. Weil die Animation nicht additiv ist, wird die anfängliche Transformation überschrieben. Falls der rote Kreis sichtbar wird, ist ein Fehler aufgetreten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko kein animateTransform
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für additive
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/8 0/8
KSVG1 0/8 0/8
WebKit 528.16 5/8 5/8
Adobe 8/8 8/8
Squiggle 1.7 6/8 6/8
Opera8.02/50 5/8 5/8
Opera9tp1 6/8 6/8
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 8/8 8/8
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 8/8 8/8

accumulate

Das Attribut accumulate tritt nur in Verbindung mit repeatDur oder repeatCount auf, diese Wiederholungen werden kumulativ, falls accumulate ebenfalls genutzt wird. Zu beachten ist, daß die SMIL Empfehlungen Beispiele enthalten, die von den Beschreibungen und Formeln abweichen. In der SMIL-Animations-Empfehlung, von SVG 1.1 referenziert, wird nicht klar, ob die Formel falsch ist und das beschriebene Verhalten beabsichtigt oder umgekehrt. Dies wurde in SMIL2.0/2.1 verändert - hier wird klar, daß die Formel normativ ist und die Beschreibungen der Beispiele falsch.

e2005-09-16-01: §M(1)P
Attribute accumulate:
Zwei kleine Kreise werden mit konstanter Winkelgeschwindigkeit um einen großen Kreis rotiert, wobei die Dauer für 45 Grad 5s beträgt. Dies wird wiederholt und das Attribut accumulate ist auf sum gesetzt. Der cyane Kreis ist eine from-to-Animation, der blaue eine by-Animation. Der sichtbare Effekt besteht in beiden Fällen darin, daß in 40s eine komplette Drehung ausgeführt wird, die dann unendlich oft wiederholt wird. Zum Vergleich werden zwei rote Kreise einmal in 40s um den großen Kreis gedreht, normalerweise sind diese aber unsichtbar hinter dem cyanen und dem blauen versteckt - wenn einer von ihnen sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine oder falsche Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko stoppt mit lustiger Fehlermeldung: 1>=1
Opera8.02/50ko keine Animation, bug-185986
Opera9tp1ko ignoriert Attribut, keine Animation für den blauen Kreis, bug-185986
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-16-02: §M(1)P
Attribut accumulate:
Ein kleiner Kreis wird mit konstanter Winkelgeschwindigkeit und einer Dauer von 20s pro Umdrehung gedreht, wobei für die Animation die Attribute additive und accumulative verwendet werden. Eine zweite by-animateTransform mit einer Skalierung wird überlagert. Diese ist auch kumulativ. Der sichtbare Effekt besteht darin, daß der kleine Kreis aus dem Zentrum herausspiralt. Damit wird eine lineare Zunahme des Rotationsradius und des Durchmessers des animierten Kreises realisiert. Für andere funktionale Abhängigkeiten muß eine endliche spline-Animation verwendet werden. Graue Kreise geben Position und Durchmesser alle 10s bis 60s an. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Positionen und roter Vergleich werden gemäß einer Methode beschrieben in SMIL2.0/2.1 berechnet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko falsche Animation
KSVG1ko keine Animation
WebKit 528.16ko Animation nicht kumulativ
Adobeko falscher Endwert für scale
Squiggle 1.7ko stoppt mit lustiger Fehlermeldung: 1>=1
Opera8.02/50ko keine Animation, bug-185986
Opera9tp1ko ignoriert accumulate, bug-185986
Opera9tp2/ beta1/2/ 9.00/9.10ko Skalierungsanimation falsch, bug-185986
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-16-03: §M(1)P
Attribut accumulate:
Ein Kreis wird von links nach rechts bewegt, wozu animateTransform, by, repeatDur und accumulate verwendet wird. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko stoppt mit lustiger Fehlermeldung: 1>=1
Opera8.02/50/ 9tp1ko keine Animation, bug-185986
Opera9tp2/ beta1/2ko falsche Animation, bug-185986
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-16-04: §M(1)P
Attribut accumulate:
Ein Kreis wird von links nach rechts bewegt, wozu animateTransform, from, by, repeatCount und accumulate verwendet wird. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2005-09-16-05: §M(1)P
diskrete Animation mit accumulate:
Ein Kreis springt von links nach rechts und zurück, wobei eine additive und diskrete Animation mit einer Dauer von 3s und einem repeatCount von 2 verwendet wird. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2006-02-12-01: §M(1)P
accumulate und animateTransform:
Ein Kreis wird in 20s mit animateTransform mit from, by und accumulate skaliert. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Das getestete Verhalten ist bezogen auf die Formel in der SMIL-Animations-Empfehlung, nicht auf die Beispiele oder ihre Beschreibung. Das gezeigte Verhalten ist das gleiche wie in der normativen Formel der Empfehlungen SMIL2.0/2.1 beschrieben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine animateTransform
WebKit 528.16ko Animation nicht kumulativ
Adobeko falsche Animation, Verhalten wie in den SMIL-Beispielen
Squiggle 1.7ko falsche Animation
Opera8.02/50ok keine animateTransform, bug-185986
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok accumulate ignoriert, bug-185986
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-03-13-01: §M(1)P
accumulate und animateTransform:
Ein blaues Quadrat wird mit animateTransform in 20s geschert, wobei values und accumulate verwendet wird. Dies wird mit einer gescherten Transformation eines roten Quadrates verglichen, bei dem values und keyTimes ohne accumulate verwendet werden, um den gleichen Effekt zu erreichen. Weil beide den gleichen Zeitablauf haben, verdeckt das blaue Quadrat immer komplett das rote. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Das getestete Verhalten ist bezogen auf die Formel in der SMIL-Animations-Empfehlung, nicht auf die Beispiele oder ihre Beschreibung. Das gezeigte Verhalten ist das gleiche wie in der normativen Formel der Empfehlungen SMIL2.0/2.1 beschrieben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko kein animateTransform
WebKit 528.16ko Animation nicht kumulativ
Adobeok -
Squiggle 1.7ko falsche Animation
Opera8.02/50ko kein animateTransform, bug-185986
Opera9tp1/ 9.50 alphako Probleme mit additive oder accumulate
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-03-13-02: §M(1)P
accumulate und animateTransform:
Zwei blaue Quadrate werden mit animateTransform in 20s gedreht, wobei values und accumulate verwendet werden. Dies wird mit einer gedrehten Transformation zweier roter Quadrate verglichen, bei denen values und keyTimes ohne accumulate verwendet werden, um den gleichen Effekt zu erreichen. Weil alle den gleichen Zeitablauf haben, verdecken die blauen Quadrate immer komplett die roten. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten. Das getestete Verhalten ist bezogen auf die Formel in der SMIL-Animations-Empfehlung, nicht auf die Beispiele oder ihre Beschreibung. Das gezeigte Verhalten ist das gleiche wie in der normativen Formel der Empfehlungen SMIL2.0/2.1 beschrieben.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko kein animateTransform
WebKit 528.16ko Animation nicht kumulativ
Adobeok -
Squiggle 1.7ko falsche Animation
Opera8.02/50ko kein animateTransform, bug-185986
Opera9tp1ko Probleme mit accumulate
Opera9tp2/ beta1ko bereits der Beginn der Animation verwirrt, accumulate 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,00ko Probleme mit accumulate
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-05-07-01: §M(1)P
Attribut accumulate:
Ein Kreis wird von links nach rechts bewegt, wozu animateTransform, from, to, repeatCount und accumulate verwendet wird. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

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

e2006-05-07-02: §M(1)P
Attribut accumulate:
Ein Kreis wird von links nach rechts bewegt, wozu cx, animate, values, repeatCount und accumulate verwendet wird. Eine lineare Bewegung in y-Richtung entsprechend der Zeit und ein Pfad sind zum Vergleich gegeben. Falls das rote Zentrum des Kreises sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16ko Animation nicht kumulativ
Adobeok -
Squiggle 1.7(ok) kleinere Genauigkeitsprobleme
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse für accumulate
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/10 0/10
KSVG1 0/10 0/10
WebKit 528.16 3/10 3/10
Adobe 8/10 8/10
Squiggle 1.7 3/10 3/10
Opera8.02/50/ 9tp1 2/10 2/10
Opera9tp2/ beta1/2 6/10 6/10
Opera9.00/9.10 8/10 8/10
Opera9.50 alpha 9/10 9/10
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 10/10 10/10
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 10/10 10/10
Testergebnisse für Additive Animation
DarstellungsprogrammSVG tiny 1.1SVG 1.1
DarstellungsprogrammSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/19 0/19
KSVG1 0/19 0/19
WebKit 528.16 8/19 8/19
Adobe 16/19 16/19
Squiggle 1.7 9/19 9/19
Opera8.02/50 7/19 7/19
Opera9tp1 8/19 8/19
Opera9tp2/ beta1/2 14/19 14/19
Opera9.00/9.10 16/19 16/19
Opera9.50 alpha 18/19 18/19
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 19/19 19/19
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 18/19 18/19