Beispiele und Tests zur Animation mit SVG

Animierbare SVG-Attribute und -Eigenschaften, nicht Teil von SVG tiny

Zu bedenken ist, daß Opera 8 mit der Angabe veröffentlicht wurde, daß SVG tiny unterstützt wird und nicht ganz SVG, daher ist es keine Überraschung, daß viele Elemente, Attribute und Eigenschaften jenseits von SVG tiny mit diesem Darstellungsprogramm nicht funktionieren werden. Amaya, KSVG, Squiggle, Adobe und spätere Operas versuchen SVG zu unterstützen, für diese sollte es also funktionieren.

Gestaltung, CSS

Das style-Element selbst hat keine animierbaren Attribute. Aber CSS-Eigenschaften sind generell meistens animierbar. Dabei handelt es sich weitgehend um dieselbe Animation wie bei den korrespondierenden XML-Attributen. Es ist einfach, die gegebenen Beispiele so zu ändern, daß getestet werden kann, ob die CSS-Unterstützung animierbar ist. Die betreffenden XML-Attribute werden ebenfalls als Eigenschaften bezeichnet, um die Übereinstimmung kenntlich zu machen. Mit dem Attribut attributeType ist es möglich, zwischen ihnen bei einer Animation zu unterscheiden.
Wenn der Wert des Attributes 'CSS' ist, wird die CSS-Eigenschaft animiert. Falls 'XML' angegeben wird, wird das XML-Attribut animiert. Falls der Wert 'auto' ist, wird die CSS-Eigenschaft animiert, falls sie existiert. Falls nicht, wird das XML-Attribut animiert. CSS überschreibt XML. 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."

CSS-Unterstützung ist nicht Teil von SVG tiny 1.1 (in 1.2 wird es optional sein).

e2005-08-26-01: §Q
set-Animation des Attributes class:
Das Attribut class wird nach 3s von s1 nach s2 gewechselt. Das angezeigte Rechteck ändert seine Eigenschaften fill, stroke, stroke-width, stroke-opacity und fill-opacity.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko Keine Animation
KSVG1ko Keine Animation und CSS
WebKit 528.16ok -
Adobeko Keine Animation
Squiggle 1.7ko Keine Animation
Opera8.02/50ko Keine Animation und CSS
Opera9tp1/2ko Keine Animation
Opera9 beta1/2/ 9.00/9.10ko falsches zweites CSS
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/ 10.60/ 11.00/11.60/ 12,00ok -
Opera10.0 beta/ 10.0ko Keine Animation mit set
Gecko 2.0ko Keine Animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-08-26-02: §Q
set-Animation des Attributes class:
Das Attribute class wird nach 3s zwischen zwei Klassenlisten ausgetauscht. Das angezeigte Rechteck ändert seine Eigenschaften fill, stroke, stroke-width, stroke-opacity und fill-opacity.

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

e2005-08-26-03: §Q
diskrete animate Animation des Attributes class:
Das Attribute class wechselt alle 3s zwischen zwei Klassenlisten. Das angezeigte Rechteck ändert seine Eigenschaften fill, stroke, stroke-width, stroke-opacity and fill-opacity.

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

e2006-07-13-01: §IQ
CSS und animierte Eigenschaften:
Die XML-Presentationsattribute fill von zwei g-Elementen als Elternelemente zweier Rechtecke werden animiert, falls kein CSS angewendet wird.
Alternativ können drei verschiedene Stile mit dem Darstellungsprogramm ausgewählt werden, 'style a', 'style b' oder 'style c', der vierte Stil ist 'no style' und referenziert eine leere CSS-Datei, daher wird dann die Animation wieder sichtbar. Stil c beinhaltet eine Pseudoklasse hover für rect-Elemente, welches fill auf inherit, stroke-opacity und opacity ändert.
Die Pseudoklasse hover ist in Kombination mit SVG anwendbar. Und wenn fill inherit ist, bedeutet dies die Anzeige der darunterliegenden XML-Presentationsattribute des g-Elementes. Solange darübergefahren wird, ist die Animation sichtbar.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko Keine Animation
KSVG1ko Keine Animation und CSS
WebKit 528.16ko Keine Auswahl, präsentiert Animation
Adobeko Keine Auswahl, zeigt die Animation und Stil c
Squiggle 1.7ko Keine zurück zu 'no style', keine Änderung mit :hover
Opera8.02/50ko Kein CSS
Opera9tp1koNur Stil c und Wechsel zum Nutzerstil (Operas interner Stil)
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 ok-
Gecko 1.8 (SeaMonkey 1.0)-Beachte: Alles außer Animation funktioniert bereits mit den Geckos.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-07-13-02: §IQ
CSS-Spezifität und Pseudoklasse hover:
Grobe Tests der CSS-Spezifitäten und der Vererbung, wobei class, id und die Pseudoklasse hover verwendet werden. Für Details siehe Titelelemente. Im Allgmeinen sollte das Resultat blau sein und wenn drübergefahren wird, wird eine Farbanimation im Bereich blau-cyan-magenta sichtbar und zwar im überfahrenen Rechteck selbst und unten rechts. Nur wenn über das Rechteck unten rechts gefahren wird, wird es nicht animiert, sondern jenes oben rechts.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko Kein hover
KSVG1ko Keine Animation und CSS
WebKit 528.16ok -
Adobeko Kein hover, keine Animation
Squiggle 1.7ko Kein :hover, keine Animation
Opera8.02/50ko Kein CSS
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 ok-
Gecko 1.8 (SeaMonkey 1.0)-Beachte: Alles außer Animation funktioniert bereits mit den Geckos.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-07-13-03: §IQ
CSS: Pseudoelemente und Pseudoklassen:
Test des Pseudoelementes :first-child und der Pseudoklassen :link, :visited, :hover, :active. Sichtbarer Effekt: Hellblaue Knöpfe mit blauem Rand und Text: Textdekoration ist unterstrichen für :link, durchgestrichen für :visited, überstrichen für :hover und nichts für :active. Die Knöpfe links starten eine Animation oder ändern den Ausschnitt. Die Knöpfe rechts verweisen auf das Dokument css01.svg oder einer anderen URI des Testdokumentes, wobei ein zufälliger GET-Parameter und Animationen für die xlink:href eines a- und eines tref-Elementes verwendet werden. Dies geschieht nur, um zu testen, ob :visited funktioniert und ob es sich ändert, falls sich die URI von einer schon besichtigten zu einer noch nicht besichtigten URI ändert oder umgekehrt. Um die URI zu ändern, auf die runden Knöpfe klickern, siehe die title-Elemente für Details.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko ignoriert
KSVG1ko Keine Animation und CSS
WebKit 528.16ko Verweis funktioniert nicht, während die Animation läuft, :visited funktioniert nicht
Adobeko Keine Pseudoklassen
Squiggle 1.7ko Keine Pseudoklassen
Opera8.02/50ko Kein CSS
Opera9tp1/2 koCSS unvollständig
Opera9beta1/2 koKeine Interaktivität
Opera9.00/9.10 ok-
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 koElement view in dieser Version ignoriert
Opera10.60/ 11.00ok -
Opera11.60/ 12,00kotext-decoration falsch
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0koKeine Interaktivität

e2007-02-24-01: §M(1)P
CSS-Spezifität:
Zwei Kreise, einer rot einer blau haben ein XML-Präsentationsattribut und eine XML-Animation für stroke-width. Das Präsentationsattribut wird mit einer CSS-Eigenschaft überschrieben. Dies bedeutet, es gibt keinen sichtbaren Effekt der XML-Animation.
Das Verhalten wird mit zwei Animationen von anderen blauen und roten Kreisen simuliert. Die roten Kreise werden immer komplett von den blauen verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

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

e2007-02-24-02: §M(1)P
CSS-Spezifität:
Zwei Kreise, einer rot einer blau haben ein XML-Präsentationsattribut und eine XML-Animation für stroke-width. Das Präsentationsattribut wird mit einer CSS-Eigenschaft überschrieben und die Animation mit einer additiven CSS-Animation. Dies bedeutet, der Animationswert wird zum statischen CSS addiert, nicht zum XML-Attribut und -Animation.
Das Verhalten wird mit zwei Animationen von anderen blauen und roten Kreisen simuliert. Die roten Kreise werden immer komplett von den blauen verdeckt. 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 keine Animation
Opera8.02/50ko Kein CSS
Opera9tp1ko falsche Animation
Opera9tp2/ beta1/2/ 9.00/9.10ko falscher unterliegender Wert
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera 11.60/ 12,00ko falsche Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko keine Animation

e2007-02-24-03: §M(1)P
CSS-Spezifität:
Zwei Kreise, einer rot einer blau haben ein XML-Präsentationsattribut und eine XML-Animation für stroke-width. Das Präsentationsattribut wird nicht mit einer CSS-Eigenschaft überschrieben, weil diese nur auf ein übergeordentes g-Element wirkt. Eine additive CSS-Animation wird hinzugefügt.
Das Verhalten wird mit zwei Animationen von anderen blauen und roten Kreisen simuliert. Die roten Kreise werden immer komplett von den blauen verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko kein CSS
KSVG1ko kein CSS
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ok -
Opera9tp1ko falsche Animation (sieht aufregend aus)
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0ko falsche Animation
Opera10.60/ 11.00ok -
Opera 11.60/ 12,00ko falsche Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko keine Animation

e2007-02-24-04: §M(1)P
CSS-Spezifität:
Zwei Kreise, einer rot einer blau haben ein XML-Präsentationsattribut und eine XML-Animation für stroke-width. Das Präsentationsattribut wird nicht mit einer CSS-Eigenschaft überschrieben, weil diese nur auf ein übergeordentes g-Element wirkt. Eine additive CSS-Animation wird hinzugefügt. Weil die XML-Animation zum XML-Attribut addiert wird und die CSS-Animation höherer Priorität zum animierte XML-Attribut, ist es nicht wichtig, daß das XML mit additive replace hinter der CSS-Animation im Quelltext steht
Das Verhalten wird mit zwei Animationen von anderen blauen und roten Kreisen simuliert. Die roten Kreise werden immer komplett von den blauen verdeckt. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

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

e2007-02-24-05: §M(1)P
CSS-Spezifität:
Ein blauer Kreis hat ein XML-Präsentationsattribut. Dies wird überschrieben mit einer CSS-Eigenschaft, welche als !important spezifiziert ist.
Dies wird aber sowieso wieder mit einer CSS-Animation von höherer Priorität als !important überschrieben. Nur eine Nutzerstilvorlage mit !important wird die CSS-Animation überschreiben. Falls etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ok-
WebKit 528.16ko keine Animation
Adobeok-
Squiggle 1.7ko keine 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.0ko keine Animation

e2007-02-24-06: §IM(2)P
CSS-Spezifität:
Ein blauer Kreis hat ein XML-Präsentationsattribut und eine CSS-Animation, die mit einem Klick auf den blauen Kreis gestartet werden kann.
Der Tester kann dies mit der externen Stilvorlage 'no style' als Vorauswahl versuchen oder mit der alternativen Stilvorlage 'cssspecifity06.css' versuchen, die eine CSS-Eigenschaft enthält, die als !important gekennzeichnet ist. Dies wird sowieso mit einer CSS-Animation überschrieben, die eine höhere Priorität als !important hat.
Der Haupttest besteht darin, die Stilvorlage cssspecifity06.css auf dem lokalen Rechner zu speichern und als Nutzerstilvorlage zu verwenden. Daß der Stil wirklich verwendet wird, ist an einem abgedunkelten stroke zu erkennen, wie auch bei der Wahl von 'cssspecifity06.css' als alternativen Stil.
Nur eine Nutzerstilvorlage mit !important wird die CSS-Animation überschreiben.
Falls in diesem Falle etwas Rotes sichtbar wird, ist ein Fehler aufgetreten.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Interaktivität
KSVG1ko keine Interaktivität
WebKit 528.16ko keine CSS-Auswahl
WebKit 528.16ok -
Adobekokeine CSS-Auswahl, eine Nutzerstilvorlage
Squiggle 1.7koNutzerstilvorlage verfügbar aber nicht verwendet oder !important ignoriert
Opera8.02/50/ 9tp1/2ko keine CSS-Auswahl, Animation nicht mit Nutzerstilvorlage überschrieben
Opera9beta1/2ko keine Interaktivität
Opera9.00/9.10koAnimation nicht mit Nutzerstilvorlage überschrieben
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko!important ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko unklar, wie Nutzerstilvorlagen im Test-browser firefox angewendet werden können.
Testergebnisse Gestaltung, CSS
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/12
KSVG1 1/12
WebKit 528.166/12
Adobe 2/12
Squiggle 1.7 1/12
Opera8.02/50 2/12
Opera9tp1 3/12
Opera9tp2/ beta1/2 4/12
Opera9.00/9.10 5/12
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha 8/12
Opera10.0 beta/ 10.0 6/12
Opera10.60/ 11.00 10/12
Opera11.60/ 12,00 7/12
Gecko 2.0 3/12
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 6/12

Interaktivität

Ereignisse (events) sind in SVG tiny definiert und mögen Einfluß auf Animationen haben. Siehe die Beispiele im Kapitel Animation.

Zeigerereignisse

e2005-10-05-01: §IQ
diskrete Animation der Eigenschaft pointer-events:
pointer-events none, all und visible werden getestet. Wenn der Text 'all' sagt, bewirkt ein Klick auf den großen Kreis eine Änderung der Farbe des kleinen Kreises nach magenta für 1s, unabhängig davon, ob etwas vom Kreis sichtbar ist oder nicht. Falls der Text 'visible' sagt, ist das nur möglich, wenn der Kreis sichtbar ist. Wenn der Text 'none' sagt, passiert gar nichts bei einem Klick. Ob fill none ist oder nicht, hat keinen Einfluß auf das Zeigerereignis.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch oder ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2ko Element ignoriert
Opera9tp1ko Element ignoriert, falsche Animation mit calcMode discrete
Opera9tp2/ 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.0ko falsches visible
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

e2005-10-05-02: §IQ
diskrete Animation der Eigenschaft pointer-events:
pointer-events none, fill und visibleFill werden getestet. Wenn der Text 'fill' sagt, bewirkt ein Klick auf die Füllung des großen Kreises eine Änderung der Farbe des kleinen Kreises nach magenta für 1s, unabhängig davon, ob etwas vom großen Kreis sichtbar ist oder nicht. Falls der Text 'visibleFill' sagt, ist das nur möglich, wenn die Füllung des großen Kreises sichtbar ist. Wenn der Text 'none' sagt, passiert gar nichts bei einem Klick.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch oder ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2ko Element ignoriert
Opera9tp1konicht testbar, falsche Animation mit calcMode discrete von visibility
Opera9tp2/ 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.0ko falsches visibleFill
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

e2005-10-05-03: §IQ
diskrete Animation der Eigenschaft pointer-events:
pointer-events none, stroke und visibleStroke werden getestet. Wenn der Text 'stroke' sagt, bewirkt ein Klick auf den Rand des großen Kreises eine Änderung der Farbe des kleinen Kreises nach magenta für 1s, unabhängig davon, ob etwas vom großen Kreis sichtbar ist oder nicht. Falls der Text 'visibleStroke' sagt, ist das nur möglich, wenn der Rand des großen Kreises sichtbar ist. Wenn der Text 'none' sagt, passiert gar nichts bei einem Klick.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch oder ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2ko Element ignoriert
Opera9tp1konicht testbar, falsche Animation von calcMode discrete von visibility
Opera9tp2/ 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.0ko falsches visibleStroke
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

e2005-10-05-04: §IQ
diskrete Animation der Eigenschaft pointer-events:
pointer-events none, painted und visiblePainted werden getestet. Wenn der Text 'painted' sagt, bewirkt ein Klick auf die gemalten Teile des großen Kreises eine Änderung der Farbe des kleinen Kreises nach magenta für 1s, unabhängig davon, ob etwas vom großen Kreis sichtbar ist oder nicht. Falls der Text 'visiblePainted' sagt, ist das nur möglich beim sichtbaren Teil des Kreises. Wenn der Text 'none' sagt, passiert gar nichts bei einem Klick.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch oder ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2ko Element ignoriert
Opera9tp1ko nicht testbar, falsche Animation mit calcMode discrete von visibility
Opera9tp2/ 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.0ok -
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

e2006-09-05-11: §IQ
opacity und pointer-events:
Ein weißer Kreis bedeckt komplett einen hellblauen. Beide haben pointer-events all. fill des hellblauen Kreises kann für 1s mit einem Klick auf den hellblauen Kreis auf blau gesetzt werden. Zuerst wird die fill-opacity des weißen Kreises in 5s von 0.8 nach 0 animiert. In der Spezifikation ist nicht erwähnt, daß durchsichtige Objekte keine Ereignisse bekommen können, daher passiert mit einem Klick nichts, bis die Anzeige des weißen Kreises nach 10s abgeschaltet wird. Dieses wird mit einem blauen Rand angedeutet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch oder ignoriert
KSVG1ko keine Interaktivität
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2ko Element ignoriert
Opera9tp1/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.0ok -
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

Eigenschaft cursor

e2005-10-05-11: §Q
diskrete Animation der Eigenschaft cursor:
cursor über dem Kreis ändert sich alle 3s, folgende Werte werden gesetzt: auto;crosshair;default;pointer;move;e-resize;ne-resize;nw-resize;n-resize; se-resize;sw-resize;s-resize;w-resize;text;wait;help. stroke ändert sich nur als Hilfe zur Zeiteinteilung.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko ignoriert
KSVG1ko Eigenschaft ignoriert
WebKit 528.16ko Eigenschaft ignoriert
Adobeko Eigenschaft ignoriert
Squiggle 1.7ko veränderter Zeiger wird nur sichtbar, falls der Zeiger rein und raus bewegt wird.
Opera8.02/50/ 9tp1/2/beta1ko Eigenschaft ignoriert
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ko der veränderte Zeiger wird nur sichtbar, wenn der Zeiger einmal raus und wieder rein bewegt wird.
Opera11.60/ 12,00ko der veränderte Zeiger wird nur sichtbar, wenn der Zeiger bewegt wird.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-05-12: §IQ
diskrete Animation der Eigenschaft cursor :
cursor über dem Kreis wird auf url(cursor1.png) nach einem Klick auf den Kreis gesetzt

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko ignoriert
KSVG1ko Eigenschaft ignoriert
WebKit 528.16ko falls der Zeiger bereits das Bild ist, beseitig ein weiterer Klick das Bild wieder
Adobeko Eigenschaft ignoriert
Squiggle 1.7ko Eigenschaft ignoriert, falsche Fehlermeldung
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ko Eigenschaft ignoriert
Gecko 2.0/ 8.0ok -
Gecko 12.0/ 24.0/ 36.0/ 48.0ko keine Interaktivität

Element cursor

e2005-10-05-21: §Q
set-Animation des xlink:href Attributes des Elementes cursor:
Das Attribut xlink:href wird nach 3s von cursor3.png nach cursor4.png gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ko Element ignoriert
Adobeko Element ignoriert
Squiggle 1.7ko Element 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 Element ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Element ignoriert

e2005-10-05-22: §Q
animate-Animation der Attribute x und y des Elementes cursor:
x und y werden nach 3s mit Wiederholung geändert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko ignoriert
KSVG1ko Element ignoriert
WebKit 528.16ko Element ignoriert
Adobeko Element ignoriert
Squiggle 1.7ko Element 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 Element ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko Element ignoriert
Testergebnisse Interaktivität
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/9
KSVG1 0/9
WebKit 528.165/9
Adobe 5/9
Squiggle 1.7 5/9
Opera8.02/50/ beta1/2 0/9
Opera9tp1 1/9
Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/9
Gecko 2.0/ 8.0 4/9
Gecko 12.0/ 24.0/ 36.0/ 48.0 1/9

Farbverläufe und Muster

Amaya9.51 unterstützt Farbverläufe oder Muster nicht; Amaya11.3.1 interpretiert sie nicht oder falsch und animiert sie nicht; Squiggle animiert Farbverläufe generell nicht und zeigt öfter mysteriöse oder auch falsche Fehlermeldungen an.

linearGradient

e2005-10-08-01: §Q
Animation des gradientUnits des linearGradient:
gradientUnits wird nach 3s von objectBoundingBox auf userSpaceOnUse gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Opera8.02/50ko Keine Animation, Opera verwendet immer objectBoundingBox und nie userSpaceOnUse, auch ohne Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-08-02: §Q
set-Animation der x1, x2, y1, y2 von linearGradient:
x1, x2, y1, y2 werden auf andere Werte gesetzt, das startet nach 3s, jedes weitere 3s später. Im Ergebnis bedeutet dies, daß die Farben von rot-blau auf blau-rot gewechselt werden. Eine graue Linie kennzeichnet die Richtung des Verklaufs.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko lediglich die erste Änderung, die anderen werden ignoriert.
WebKit 528.16ok -
Adobeok -
Opera8.02/50ok -
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-10-08-03: §Q
Animation von x1, x2, y1, y2 des linearGradient:
x1, x2, y1, y2 werden nach 3s animiert, jedes wird für 3s animiert. Im Ergebnis ändern sich die Farben von rot-blau nach blau-rot. Eine graue Linie kennzeichnet die Richtung des Verklaufs.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50ok -
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-10-08-04: §Q
Animation von spreadMethod des linearGradient:
spreadMethod wird alle 3s von pad zu reflect zu repeat zu pad gewechselt.

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

e2005-10-08-05: §Q
Animation von xlink:href des linearGradient:
xlink:href von fill wird nach 3s für 3s von lG1 zu lG2 gewechselt, was den Farbverlauf von rot-blau nach gelb-magenta ändert. xlink:href von stroke wird nach 3s für 3s von lG2 zu lG1 gewechselt, was den Farbverlauf von gelb-magenta nach rot-blau ändert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50ko Keine Animation
Opera9tp1ko Keine 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.0ok -

e2005-10-08-06: §Q
Animation von gradientTransform des linearGradient:
gradientTransform wird genutzt zu einer Rotation mit animateTransform rotate.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ko Keine Animation
Adobeok -
Opera8.02/50ko Keine Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse linearGradient
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/6
KSVG1 1/6
WebKit 528.16 4/6
Adobe 6/6
Squiggle 1.7 0/6
Opera8.02/50 2/6
Opera9tp1 5/6
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 6/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 6/6

radialGradient

e2005-10-09-01: §Q
Animation von gradientUnits des radialGradient:
gradientUnits wird nach 3s von objectBoundingBox nach userSpaceOnUse gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Opera8.02/50ko Keine Animation, Opera nutzt immer objectBoundingBox und nie userSpaceOnUse, auch ohne Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-09-02: §Q
set-Animation von cx, cy und r des radialGradient:
cx, cy und r werden nacheinander auf andere Werte gesetzt, was nach 3s beginnt und nach 3s weitergeht. Zentren sind mit kleinen grauen Kreisen gekennzeichnet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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-10-09-03: §Q
Animation von cx, cy und r des radialGradient:
cx, cy und r werden nach 3s animiert, jedes nacheinander für 3s. Werte des Zentrums sind mit kleinen grauen Kreisen gekennzeichnet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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 (Strörungen in tp2)
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-09-04: §Q
set-Animation von fx, und fy des radialGradient:
fx und fy werden nacheinander auf andere Werte gesetzt, was nach 3s beginnt und nach 3s fortgesetzt wird.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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-10-09-05: §Q
Animation von fx und fy des radialGradient:
fx, und fy werden nach 3s animiert, jedes für 3s.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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-10-09-06: §Q
Animation des spreadMethod von radialGradient:
spreadMethod wird jeweils nach 3s gewechselt von pad zu reflect zu repeat zu pad.

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

e2005-10-09-07: §Q
Animation des xlink:href von radialGradient:
xlink:href von fill wird nach 3s für 3s von lG1 zu lG2 gewechselt, was den Farbverlauf von orange-blau zu grün-magenta ändert. xlink:href von stroke wird nach 3s für 3s von lG2 zu lG1 gewechselt, was den Farbverlauf von grün-magenta zu orange-blau ändert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ko Falscher Farbverlauf
Adobeok -
Opera8.02/50ko Keine Animation, falsche Interpretation von fx, fy außerhalb r
Opera9tp1ko Keine Animation, falsche Interpretation von fx, fy außerhalb r
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-10-09-08: §Q
Animation des gradientTransform von radialGradient:
gradientTransform wird durch Nutzung einer animateTransform mit skewX und skewY geschert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ko Keine Farbverlauf
Adobeok -
Opera8.02/50ko Keine Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse radialGradient
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/8
KSVG1 1/8
WebKit 528.16 5/8
Adobe 8/8
Squiggle 1.7 0/8
Opera8.02/50 4/8
Opera9tp1 7/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
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 8/8

Gradient stops

e2005-10-10-01: §Q
set-Animation des Elementes stop in einem Farbverlauf:
Ein stop eines Farbverlaufes wird nach 3s von 0 auf 0.25 gesetzt, der andere von 1 auf 0.75 nach 6s.

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

e2005-10-10-02: §Q
Animation des Elementes stop eines Farbverlaufes:
Ein stop eines Farbverlaufes wird in 3s von 0 nach 0.25 modifiziert, der andere von 1 auf 0.75 nach 3s in 3s.

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

e2005-10-10-03: §Q
set-Animation der Eigenschaft stop-color eines Farbverlaufes:
Eine Eigenschaft stop-color eines Farbverlaufes wird nach 3s von #ff00ff auf #008800 gesetzt, die andere von #00ff00 auf #ff88ff nach 6s.

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

e2005-10-10-04: §QUA
Animation der Eigenschaft stop-color eines Farbverlaufes:
Eine Eigenschaft stop-color eines Farbverlaufes wird in 3s von #ffaa00 nach #00aaff animiert, die andere von #0000ff nach #ff00aa nach 3s in 3s (animateColor).
Superposition ohne Interaktion einzelner zufälligen radialen Welle
Bei jedem Aufruf wird eine neue Zufallsauswahl getroffen (animateColor).

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ko Farbverlauf nicht wiederholt beim Wellenbeispiel
Adobeok -
Opera8.02/50/ 9tp1/2/beta1ko Keine Animation
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.0ko Kein animateColor

e2006-02-27-01: §QUA
Animation der Eigenschaft stop-color eines Farbverlaufes:
Eine Eigenschaft stop-color eines Farbverlaufes wird in 3s von #ffaa00 nach #00aaff animiert, die andere von #0000ff nach #ff00aa nach 3s in 3s (animate).
Superposition ohne Interaktion einzelner zufälligen radialen Welle
Bei jedem Aufruf wird eine neue Zufallsauswahl getroffen (animate).

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ko Farbverlauf nicht wiederholt beim Wellenbeispiel, diskrete Animation?
Adobeok -
Opera8.02/50ko Keine Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-10-05: §Q
set-Animation der Eigenschaft stop-opacity eines Farbverlaufes:
Eine Eigenschaft stop-opacity wird nach 3s von 1 auf 0.3 gesetzt, die andere von 1 auf 0.3 nach 6s.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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-10-10-06: §Q
Animation der Eigenschaft stop-opacity eines Farbverlaufes:
Eine Eigenschaft stop-opacity wird innerhalb von 3s von 1 nach 0.3 geändert, die andere von 1 nach 0.3 nach 3s in 3s.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeok -
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 Farbverlauf stop
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/7
KSVG1 0/7
WebKit 528.16 5/7
Adobe 7/7
Squiggle 1.7 0/7
Opera8.02/50 2/7
Opera9tp1/tp2/ beta1 6/7
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/7
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 6/7
Testergebnisse Farbverläufe
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/21
KSVG1 2/21
WebKit 528.1614/21
Adobe 21/21
Squiggle 1.7 0/21
Opera8.02/50 8/21
Opera9tp1 18/21
Opera9tp2/ beta1 20/21
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 21/21
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 20/21

Muster

e2005-10-14-01: §Q
Animation des patternUnits von pattern:
patternUnits wird nach 3s von objectBoundingBox auf userSpaceOnUse gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko falsche Animation
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.0kofalsche Mustergröße
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-02: §Q
Animation des patternContentUnits von pattern:
patternContentUnits wird nach 3s von objectBoundingBox zu userSpaceOnUse gewechselt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko keine oder falsche Animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-14-03: §Q
Animation des patternTransform von pattern:
patternTransform wird mit mehreren Werten von skewX animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko kein Muster, keine Animation
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.0kofalsche Mustergröße
Gecko 24.0/ 36.0/ 48.0kofalsches Muster bei starker Scherung

e2005-10-14-04: §Q
Set-Animation der x, y, width, und height von pattern:
x, y, width, und height werden nach 3s auf verschiedene Werte gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko kein Muster, keine Animation
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.0kofalsche Mustergröße
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-05: §Q
Animation der x, y, width, und height von pattern:
x, y, width, und height werden mit Wiederholungen zu anderen Werten animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko kein Muster, keine Animation
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.0kofalsche Mustergröße
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-06: §Q
Animation des xlink:href von pattern:
xlink:href wird nach 3s von einem zum anderen Muster gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
KSVG1ko Keine Animation
WebKit 528.16kokein Muster
Adobeok -
Opera8.02/50ko Opera 8 ignoriert pattern
Opera9tp1/2/ beta1ko kein Muster, keine Animation (falsche Animation in tp2/ beta1)
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0kofalsche Mustergröße
Gecko 24.0/ 36.0/ 48.0ok -
Testergebnisse Muster
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/6
KSVG1 1/6
WebKit 528.160/6
Adobe 6/6
Squiggle 1.7 0/6 *
Opera8.02/50/ 9tp1/2/beta1 0/6
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 6/6
Gecko 2.0/ 8.0/ 12.0 1/6
Gecko 24.0/ 36.0/ 48.0 5/6

* Squiggle 1.7 animiert Muster nicht, typisch ist das Muster selbst falsch, zudem werden oft falsche Fehlermeldungen ausgegeben.

Ausschnitte, Maskierungen und Kombinationen

Ausschnitte

e2005-10-15-01: §Q
Animation der Eigenschaft overflow:
Die Eigenschaft overflow eines eingebetteten svg wird nach 3s von hidden auf visible gesetzt. Der sichtbare Effekt besteht darin, daß zunächst ein zentriertes hellblaues Quadrat sichtbar ist, nach 3s wird ein dunkelblaues Quadrat um das hellblaue herum sichtbar.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ko eingebettetes svg und overflow ignoriert, keine Animation
Opera9tp1ko Keine 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.0ok -

e2005-10-15-02: §Q
Animation der Eigenschaft overflow:
Die Eigenschaft overflow eines eingebetteten svg wird in 12s mit folgenden Werten variiert: auto, scroll, visible, hidden. Gemäß der Spezifikation gibt es keinen Unterschied zwischen auto und visible einerseits und hidden und scroll andererseits. Der sichtbare Effekt besteht darin, daß zunächst ein zentriertes hellblaues Quadrat umrandet von einem dunkelblauen Quadrat sichtbar ist. Im nächsten Animationsschritt ist nur das hellblaue Quadrat sichtbar. Dann erscheint wieder das hellblaue Quadrat vom dunkelblauen umgeben und dann wieder nur das hellblaue. Nach den 12s wird dauerhaft das hellblaue umgeben vom dunkelblauen angezeigt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko Keine Animation
WebKit 528.16ok -
Adobeko kein scroll oder auto
Squiggle 1.7ko keine Animation
Opera8.02/50ko eingebettetes svg und overflow ignoriert, keine Animation
Opera9tp1ko Keine Animation, Attribut 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.0ok -

e2005-10-15-03: §Q
Animation und Eigenschaft overflow:
Zwei eingebettete svg-Elemente mit jeweils einem bewegten Kreis liegen vor. Der orange bewegt sich von links nach rechts, der blaue von rechts nach links. Beide befinden sich in ihrem eigenen svg-Element. Da die Grenze zwischen beiden in der Mitte ist (markiert mit einer dünnen Linie), verschwinden beide in der Mitte in einer Annihilation. Dies trifft für overflow hidden zu. In einem zweiten Durchgang nach 10s werden beide overflow-Eigenschaften auf visible gesetzt. Die Kreise setzen diesmal ihre Bewegung in der jeweiligen Region der anderen fort und verschwinden nicht.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko Animation nicht reproduzierbar, Wiederholung ignoriert
WebKit 528.16ok -
Adobeok-
Squiggle 1.7ko Eigenschaft ignoriert oder nicht animiert
Opera8.02/50ko falsche Anzeigeder svg-Elemente und keine Animation
Opera9tp1ko Eigenschaft ignoriert, unsinnige oder keine 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.0ok -

e2008-03-07-01: §Q
overflow und animiertes svg:
overflow wird für ein animiertes svg-Element animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte svg-Element beinhaltet einen blauen Kreis auf einem weißen Rechteck, welche beide größer als das svg-Element sind, welches von oben links nach unten rechts mit Wiederholung bewegt wird. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16kofalscher Zeitverlauf
Adobekofalsches auto
Squiggle 1.7ko Eigenschaft ignoriert oder nicht animiert
Opera8.02/50ko keine Animation
Opera9tp1ko Eigenschaft ignoriert oder nicht animiert
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.0kofalsches auto
Gecko 24.0/ 36.0/ 48.0kofalsches inherit und scroll

e2008-03-07-02: §Q
overflow und animiertes Symbol:
overflow wird für ein animiertes symbol-Element animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte Symbol beinhaltet einen blauen Kreis auf einem weißen Rechteck, welche beide größer als die animierte viewBox des Symbols sind. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt.
Der durch ein use-Element definierte Bereich für das Symbol wird mit einem dünn schwarz umrandeten Rechteck angedeutet, fall abgeschnitten wird, sind die Fragmente des Symbols nur innerhalb dieses Rechtecks.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16koverwirrte Anzeige
Adobekofalsches auto
Squiggle 1.7ko Eigenschaft ignoriert oder nicht animiert, mehrere Fehlermeldungen
Opera8.02/50kokein Symbol, keine Animation
Opera9tp1ko keine Animation, immer sichtbar
Opera9tp2ko immer sichtbar
Opera9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok falsches inherit
Opera11.60/ 12,00ko ignoriert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ko keine Animation

e2008-03-07-03: §Q
overflow und animiertes image:
overflow wird für ein animiertes image-Element animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte image-Element referenziert ein einfaches SVG-Dokument, welches einen blauen Kreis auf einem weißen Rechteck beinhaltet, welche beide größer als das image-Element sind, welches von oben links nach unten rechts mit Wiederholung bewegt wird. overflow des referenzierten Dokumentes wird ignoriert. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16kokeine Animation
Adobekofalsches auto
Squiggle 1.7ko falscher Anfangswert, Animation falsch
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10ko kein (SVG)-Bild
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko ignoriert
Gecko 2.0/ 8.0/ 12.0ko ignoriert
Gecko 24.0/ 36.0/ 48.0ko falsches auto

e2008-03-07-04: §Q
overflow und animierte marker:
overflow wird für ein animiertes marker-Element animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte marker-Element beinhaltet einen blauen Kreis auf einem weißen Rechteck, welche beide größer als die viewBox des marker-Elementes sind. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt. Die Bereiche der Markierungen werden mit einem dünn schwarz geränderten Rechteck angedeutet, falls angeschnitten, sind die Markierungen nur innerhalb dieser Rechtecke.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16koverwirrte Anzeige
Adobekofalsche Voreinstellung, auto und scroll
Squiggle 1.7ko falsche Fehlermeldung, behauptet, viewBox sei nicht animierbar
Opera8.02/50/ 9tp1/2/ beta1ko kein marker
Opera9beta 2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ko inherit falsch
Opera11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0kofalsches auto

e2008-03-07-05: §Q
overflow und animierte marker:
overflow wird für ein animiertes marker-Element (referenziert with marker-start, marker-end, marker-mid) animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte marker-Element beinhaltet einen blauen Kreis auf einem weißen Rechteck, welche beide größer als die viewBox des marker-Elementes sind. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt. Die Bereiche der Markierungen werden mit einem dünn schwarz geränderten Rechteck angedeutet, falls angeschnitten, sind die Markierungen nur innerhalb dieser Rechtecke.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation
WebKit 528.16koverwirrte Anzeige
Adobekofalsche Voreinstellung, auto und scroll
Squiggle 1.7ko falsche Fehlermeldung, behauptet, viewBox sei nicht animierbar
Opera8.02/50/ 9tp1/2/ beta1ko kein marker
Opera9beta 2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ko inherit falsch
Opera11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0kofalsches auto

e2008-03-07-06: §Q
overflow und animiertes pattern:
overflow wird für ein animiertes pattern-Element animiert mit den Werten hidden;visible;inherit;auto;scroll. Das animierte Muster beinhaltet einen blauen Kreis auf einem weißen Rechteck, welche beide größer als die viewBox des Musters sind. Die Animation von overflow beginnt nach 5s. Falls es visible oder auto ist, werden weißes Rechteck und blauer Kreis nicht angeschnitten. Der Zeitablauf wird mit einem entsprechenden Text unten links angezeigt. Der Bereich des Musters wird mit einem dünn schwarz geränderten Rechteck angedeutet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Animation, manchmal überraschende Farben
WebKit 528.16kofalscher Zeitablauf
Adobekokeine Animation für overflow
Squiggle 1.7ko bietet Fehlermeldungen
Opera8.02/50/ 9tp1/2/ beta1ko kein pattern
Opera9beta 2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00kokeine Animation für overflow
Gecko 2.0/ 8.0/ 12.0koignoriert, falsche Mustergröße
Gecko 24.0/ 36.0/ 48.0koignoriert

e2005-10-15-11: §P
Animation der Eigenschaft clip:
Die Eigenschaft clip eines eingebetteten svg wird nach 3s von rect(200, 200, 200, 200) auf auto gesetzt. Der sichtbare Effekt besteht darin, daß nur ein zentriertes magenta Quadrat sichtbar ist. Nach 3s wird ein blaues Quadrat um das magenta herum sichtbar. Beide sind grau gekennzeichnet.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko clip ignoriert, keine Animation
WebKit 528.16koclip ignoriert, keine Animation
Adobeko Keine Animation
Squiggle 1.7ko keine Animation
Opera8.02/50ko eingebettete svg und clip ignoriert, keine Animation
Opera9tp1ko clip ignoriert, keine Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60ok -
Opera11.00/11.60/ 12,00ko eingebettete svg und clip ignoriert, keine Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0kokein anfängliches Quadrat

e2005-10-15-12: §P
Animation der Eigenschaft clip:
Die Eigenschaft clip eines eingebetteten svg ändert sich in 3s von rect(200, 200, 200, 200) nach rect(0, 0, 0, 0). Beide sind grau gekennzeichnet. Der sichtbare Effekt besteht darin, daß nur ein zentriertes magenta Quadrat sichtbar ist. Innerhalb von 3s wird ein blaues Quadrat um das magenta herum sichtbar.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko clip ignoriert, keine Animation
WebKit 528.16koclip ignoriert, keine Animation
Adobeko Keine Animation
Squiggle 1.7ko keine Animation
Opera8.02/50ko eingebettetes svg und clip ignoriert, keine Animation
Opera9tp1ko clip ignoriert, keine Animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60ok -
Opera11.00/11.60/ 12,00ko eingebettete svg und clip ignoriert, keine Animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0kokeine Animation

e2009-03-01-01: §P
Animation der Eigenschaft clip eines Bildes:
Mit clip wird ein animierter Ausschnitt eines Bildes festgelegt. Der korrekte Ausschnitt wird mit einem blau gerandeten Rechteck gekennzeichnet. Das komplette Bild ist teiltransparent hinterlegt.

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

e2005-10-15-21: §Q
Animation der Eigenschaft clipPath:
clipPathUnits wird nach 3s von objectBoundingBox auf userSpaceOnUse gesetzt. Das ändert als sichtbaren Effekt hauptsächlich die Größe der Form.

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

e2005-10-15-22: §Q
Animation der Eigenschaft clipPath:
Das Attribut transform mit den Typen skewX und skewY wird animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko falsch
KSVG1ko clipPath falsch, keine Animation
WebKit 528.16koclipPath falsch, keine Animation
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ko clipPath ignoriert, keine Animation
Opera9tp1/2ko Keine Animation
Opera9 beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko keine Animation
Gecko 2.0/ 8.0/ 12.0ko clipPath falsch
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-15-23: §Q
Animation der Eigenschaft clip-path:
Die Eigenschaft clip-path wird nach 3s von der Form gegeben durch clipPath auf none gesetzt. Die Form ändert sich zu einem Quadrat.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko clipPath falsch
WebKit 528.16koclipPath falsch
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko clipPath ignoriert, keine Animation
Opera9tp1/2/ beta1/2ko Keine Animation
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-10-15-24: §Q
Animation der Eigenschaft clip-path:
Die Eigenschaft clip-path wird innerhalb von 9s zwischen drei clipPaths gewechselt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko clipPath falsch, Keine Animation
WebKit 528.16koclipPath falsch
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko clipPath ignoriert, Keine Animation
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.0ok -

e2005-10-15-25: §Q
Animation der Eigenschaft clip-rule:
Die Eigenschaft clip-rule wird nach 3s von evenodd auf nonzero gesetzt. Der Überlapp von zwei Quadraten ist zunächst nicht farbig, hat dann die gleiche Farbe wie die Quadrate.

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

e2005-10-15-26: §QU
Animation des path in clipPath:
path innerhalb von clipPath wird in 20s mit mehreren Werten animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine Anzeige, Absturz
WebKit 528.16kokeine Anzeige
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ko clipPath ignoriert, keine Animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse Ausschnitte
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/18
KSVG1 1/18
WebKit 528.164/18
Adobe 8/18
Squiggle 1.7 2/18
Opera8.02/50 0/18
Opera9tp1 3/18
Opera9tp2 10/18
Opera9 beta1/2 12/18
Opera9.00/9.10 13/18
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 13/18
Opera10.60 14/18
Opera11.00/11.60/ 12,00 11/18
Gecko 2.0/ 8.0 7/18
Gecko 12.0 8/18
Gecko 24.0/ 36.0/ 48.0 9/18

Maskierung

e2005-10-16-01: §Q
set-Animation des Elementes mask:
maskUnits wird nach 3s von objectBoundingBox zu userSpaceOnUse gewechselt. Hauptsächlich ändert sich dadurch als sichtbarer Effekt die Form.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ok *
WebKit 528.16kokeine Maske
Adobeok *
Squiggle 1.7ko keine Animation
Opera8.02/50ko mask ignoriert
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keine Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok *
Opera11.60/ 12,00ko Dreieck falsch positioniert
Gecko 2.0/ 8.0ko keine Animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok *

* Zu beachten ist, daß die Ergebnisse der Maskierung unterschiedlich sind, das gleiche für KSVG1 und für Squiggle, andere für Opera und Adobe.

e2005-10-16-02: §Q
set-Animation des Elementes mask:
maskContentUnits wird nach 3s von objectBoundingBox zu userSpaceOnUse gewechselt. Hauptsächlich ändert sich dadurch als sichtbarer Effekt die Größe der Form.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko Keine Animation
WebKit 528.16kokeine Maske
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ko mask ignoriert
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko Dreieck falsch positioniert
Gecko 2.0/ 8.0ko keine Animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-03: §Q
Animation des Elementes mask:
x, y, width und height werden innerhalb von 12s animiert. Hauptsächlich ändert sich dadurch als sichtbarer Effekt die Abmessung des sichtbaren Teils des maskierten Bereichs.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko Keine Animation
WebKit 528.16kokeine Maske
Adobeok -
Squiggle 1.7ko keine Animation
Opera8.02/50ko mask ignoriert
Opera9tp1/2/ beta1/2/ 9.00/9.10ko keine Animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko Dreieck falsch positioniert
Gecko 2.0/ 8.0ko keine Animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-04: §Q
set-Animation der Eigenschaft mask:
Die Eigenschaft mask wird nach 3s von einer Maskierung auf none gesetzt.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ok -
WebKit 528.16kokeine Maske
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko mask ignoriert
Opera9tp1/2/ beta1/2ko keine Animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko Dreieck falsch positioniert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-05: §Q
Animation der Eigenschaft mask:
Die Eigenschaft mask wird innerhalb von 9s zwischen 3 verschiedenen Formen animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko keine Animation
KSVG1ko keine oder falsche Animation
WebKit 528.16kokeine Maske
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ko mask ignoriert
Opera9tp1/ beta2ko falsche Animation, beta2 ignoriert dritte Maske
Opera9tp2/ beta1/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00ko Dreieck der ersten Maske falsch positioniert
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Testergebnisse Maskierung
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51/ 11.3.1 0/5
KSVG1 2/5
WebKit 528.160/5
Adobe 5/5
Squiggle 1.7 2/5 *
Opera8.02/50 0/5
Opera9tp1/ beta2 1/5
Opera9tp2/ beta1 2/5
Opera9.00/9.10 3/5
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 5/5
Opera11.60/ 12,00 0/5
Gecko 2.0/ 8.0 2/5
Gecko 12.0/ 24.0/ 36.0/ 48.0 5/5

* Das Ergebnis für Maskierung selbst sieht in Squiggle 1.7 anders aus als mit Opera oder dem adobe-plugin - falsch?

Opazität

fill-opacity, stroke-opacity und stop-opacity sind bereits in den entsprechenden Bereichen getestet worden.

e2005-10-15-51: §Q
set-Animation der Eigenschaft opacity:
Verschiedene Formen einer Gruppe ändern nach 3s ihre Opazität von 1 nach 0.8. fill-opacity und stroke-opacity werden auch angewendet, aber nicht animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51ko Bereich der opacity unvollständig
Amaya11.3.1ok -
KSVG1ko Keine Animation von Gruppierungen
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-10-15-52: §Q
Animation der Eigenschaft opacity:
Verschiedene Formen einer Gruppe ändern innerhalb von 12s ihre Opazität von 1 nach 0 und werden eingefroren. fill-opacity und stroke-opacity werden auch angewendet, aber nicht animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51ko Bereich der opacity unvollständig
Amaya11.3.1ok -
KSVG1ko Keine Animation von Gruppierungen
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-10-15-53: §Q
Animation der Eigenschaft opacity:
(hauptsächlich für KSVG:) Der Text 'test' ändert seine Opazität innerhalb von 12s von 1 nach 0 und wird eingefroren. fill-opacity und stroke-opacity werden auch angewendet, aber nicht animiert.

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

e2006-08-16-01: §Q
Animation der Eigenschaft opacity:
Für vier JPEG-Bilder wird die Opazität von 1 nach 0 beziehungsweise von 1 nach 0 innerhalb von 12s mit einem beginn bei 2s verändert.

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

e2008-03-13-11: §Q
Additivität von opacity:
Verschiedene Formen einer Gruppe werden von einem use-Element referenziert. Dieses ändert seine Opazität links mit additiven Animationen. Dies wird verglichen mit einem use rechts, bei dem einfachere Animationen den gleichen Effekt bewirken. fill-opacity und stroke-opacity werden auch angewendet, aber nicht animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko Gebiet der Opazität unvollständig, falsche Animation
KSVG1ko keine Animation von Gruppen
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko keine 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.0ok -

e2008-03-13-12: §Q
Additivität von opacity:
Verschiedene Formen einer Gruppe werden von einem use-Element referenziert. Dieses ändert seine Opazität links mit Werten außerhalb des erlaubten Bereiches und additiven Animationen. Dies wird verglichen mit einem use rechts, bei dem einfachere Animationen den gleichen Effekt bewirken. fill-opacity und stroke-opacity werden auch angewendet, aber nicht animiert.

Testergebnisse
DarstellungsprogrammErgebnisKommentar
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ko Gebiet der Opazität unvollständig, falsche Animation
KSVG1ko keine Animation von Gruppen
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1ko keine 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.0ko falsche Animation
Testergebnisse Opazität
DarstellungsprogrammSVG 1.1
DarstellungsprogrammSVG 1.1
Amaya9.51 1/6
Amaya11.3.1 3/6
KSVG1 1/6
WebKit 528.166/6
Adobe 6/6
Squiggle 1.7 6/6
Opera8.02/50/ 9tp1 4/6
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 6/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 5/6