Examples and Tests for SVG Animation

Animatable SVG attributes and properties, not part of SVG tiny

Note, that Opera 8 was published having the abilities of SVG-tiny and not SVG, therefore it is no surprise, that many elements, attributes and properties beyond SVG-tiny will not work with this user agent. Amaya, KSVG, Squiggle, Adobe and later Operas try to support SVG, for them it should work.

Styling

The style element itself has no animatable attributes. But CSS properties are in general animatable. This is almost the same animation than for the corresponding XML-attributes. It is easy to change the given examples to test, if CSS support is animatable. With the attributeType attribute it is possible to distinguish between them.
If it is 'CSS', the CSS-property is animated. If it is 'XML', the XML attribute is animated. If it is 'auto', the CSS-property is animated, if it exists. If not, the XML-attribute is animated. CSS overwrites XML. Or the XML attributes contribute to the CSS cascade like corresponding CSS style rules placed at the start of the author style sheet with a specifity of zero.
SMIL describes in the animation sandwich model:
"Specifically, animating an attribute defined in XML will modify the presentation value before it is passed through the style sheet cascade, using the XML DOM value as its base. Animating an attribute defined in a style sheet language will modify the presentation value passed through the remainder of the cascade."
and
"When animation is applied to CSS properties of a element, the base value to be animated is read using the (readonly) getComputedStyle() method on that element. The values produced by the animation are written into an override stylesheet for that element, which may be obtained using the getOverrideStyle() method. These new values then affect the cascade and are reflected in a new computed value (and thus, modified presentation). This means that the effect of animation overrides all style sheet rules, except for user rules with the !important property."
CSS support is not a part of SVG tiny 1.1 (in SVG tiny 1.2 it will be optional).

e2005-08-26-01: 利
set animation of the class attribute:
The class attribute is changed from s1 to s2 after 3 seconds. The displayed rectangle changes the properties fill, stroke, stroke-width, opacity, stroke-opacity and fill-opacity.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation and CSS
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50fail no animation and CSS
Opera9tp1/2fail no animation
Opera9 beta1/2/ 9.00/9.10fail wrong second CSS
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/ 10.60/ 11.00/11.60/ 12,00ok -
Opera10.0 beta/ 10.0fail no set animation
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-08-26-02: 利
set animation of the class attribute:
The class attribute is changed between two class lists after 3 seconds. The displayed rectangle changes the properties fill, stroke, stroke-width, stroke-opacity and fill-opacity.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation and CSS
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50fail no animation and CSS
Opera9tp1/2fail no animation
Opera9 beta1/2/ 9.00/9.10fail wrong second CSS
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/ 10.60/ 11.00/11.60/ 12,00ok -
Opera10.0 beta/ 10.0fail no set animation
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-08-26-03: 利
discrete animate animation of the class attribute:
The class attribute changes between two class lists every 3 seconds. The displayed rectangle changes the properties fill, stroke, stroke-width, stroke-opacity and fill-opacity.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation and CSS
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50/ 9beta1/2/ 9.00/9.10fail no animation and CSS
Opera9tp1/2fail no animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-07-13-01: 兌Q
CSS and animated properties:
The XML presentation attributes fill of two g elements as parents of two rectangles are animated, if no CSS is applied.
Alternatively three different styles can be choosen with the user agent, 'style a', 'style b' or 'style c', the fourth style is 'no style' and refers to an empty CSS file, therefore the animation becomes visible again. If one of the two styles a or b is used, no animation will be visible.
Style c contains a pseudo class hover for rect elements, changing fill to inherit, stroke-opacity and opacity. The pseudo class hover is applicable in combination with SVG. And if fill is inherit it means, that it inherits the underlying XML presentation attributes from the g element. While hovered, the animation will be visible again.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation and CSS
WebKit 528.16fail no choice, presents animation
Adobefail no choice, presents animation and style c ?
Squiggle 1.7fail no switch back to no style, no change with :hover
Opera8.02/50fail no CSS
Opera9tp1fail only style c and switch to user style (Opera internal style)
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 1.8 (SeaMonkey 1.0)- note, that everything except animation works already in the Geckos
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-07-13-02: 兌Q
CSS specifity and pseudo class hover:
Some rough testing of CSS specifities and inheritance, using class, id and pseudo class hover. See title elements for details. In general the result should be blue and if hovered some colour animation in the blue-cyan-magenta range will get visible in the hovered rectangle itself and in the bottom right one. Just if the bottom right one is hovered itself, it will not be animated, but the top right one.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no hover
KSVG1fail no animation and CSS
WebKit 528.16ok -
Adobefail no :hover or animation
Squiggle 1.7fail no :hover or animation
Opera8.02/50fail no 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 1.8 (SeaMonkey 1.0)- note, that everything except animation works already in the Geckos.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-07-13-03: 兌Q
CSS pseudo elements and classes:
Test of the pseudo element :first-child and pseudo classes :link, :visited, :hover, :active. Visible effect: light blue buttons with blue stroke and text. text-decoration is underline for :link, line-through for :visited, overline for :hover and none for :active. Buttons on the left start an animation or change the view. Buttons on the right refer to the document css01.svg or to another URI of the tested document, using a random GET-parameter and animations for the xlink:href of the a and the tref element. This is only to test, if :visited works and if it changes, if the URI changes from a visited URI to a not visited and vice versa. To change the URI click on of the round buttons, see title elements for details.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation and CSS
WebKit 528.16fail link does not work while animation is running, :visited does not work
Adobefail no pseudo classes
Squiggle 1.7fail no pseudo classes
Opera8.02/50fail no CSS
Opera9tp1/2failCSS incomplete
Opera9beta1/2failno interactivity
Opera9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failview element support corrupted in this version
Opera10.60/ 11.00ok -
Opera11.60/ 12,00failtext-decoration wrong
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno interactivity

e2007-02-24-01: 冶(1)P
CSS specifity:
Two circles, one red, one blue have an initial XML presentation attribute and a XML animation for stroke-width. The presentation attribute is overwritten by a CSS property. This means, there is no visible effect from the XML animation.
The behaviour is simulated with two animations of other red and blue circles. The red circles are always covered completely by the blue circles. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no CSS
KSVG1fail no CSS
WebKit 528.16ok -
Adobefail attributeType ignored
Squiggle 1.7ok-
Opera8.02/50fail no 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: 冶(1)P
CSS specifity:
Two circles, one red, one blue have an initial XML presentation attribute and a XML animation for stroke-width. The presentation attribute is overwritten by a CSS property and the animation with an additional additive CSS animation. This means, the animation value is added to the static CSS, not to the XML attribute and animation.
The behaviour is simulated with two animations of other red and blue circles. The red circles are always covered completely by the blue circles. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animation
Squiggle 1.7fail no animation
Opera8.02/50fail no CSS
Opera9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10fail wrong underlying value
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera 11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation

e2007-02-24-03: 冶(1)P
CSS specifity:
Two circles, one red, one blue have an initial XML presentation attribute an a XML animation for stroke-width. The presentation attribute is not overwritten by a CSS property, because this is only for a parent g element. An additive CSS animation is added.
The behaviour is simulated with two animations of other red and blue circles. The result is no visible animation within the whole dur of 10s. The red circles are always covered completely by the blue circles. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no CSS
KSVG1fail no CSS
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50ok -
Opera9tp1fail wrong animation (looks exciting)
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0fail wrong animation
Opera10.60/ 11.00ok -
Opera 11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation

e2007-02-24-04: 冶(1)P
CSS specifity:
Two circles, one red, one blue have an initial XML presentation attribute an a XML animation for stroke-width. The presentation attribute is not overwritten by a CSS property, because this is only for a parent g element. An additive CSS animation is added. Because the XML animation is added to the XML attribute and the CSS animation with higher priority is added to the animated XML attribute, it is not important, that the XML with additive replace is behind the CSS animation in the source code.
The behaviour is simulated with two animations of other red and blue circles. The result is no visible animation within the whole dur of 10s. The red circles are always covered completely by the blue circles. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no CSS
KSVG1fail no CSS
WebKit 528.16fail wrong animation
Adobefail wrong animation
Squiggle 1.7fail no animation
Opera8.02/50fail wrong animation
Opera9tp1fail wrong animation (looks exciting)
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,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation

e2007-02-24-05: 冶(1)P
CSS specifity:
A blue circle has an initial XML presentation attribute. The presentation attribute is overwritten by a CSS property specified as !important. This is overwritten anyway with a CSS animation of higher priority as !important. Only a user style sheet with !important will overwrite the CSS animation. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16fail no animation
Adobeok -
Squiggle 1.7fail no 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.0fail no animation

e2007-02-24-06: 兌M(2)P
CSS specifity:
A blue circle has an initial XML presentation attribute and a CSS animation, which can be started with a click on the blue circle.
The tester can try this with the external stylesheet 'no style' as default choice or with the alternate external stylesheet 'cssspecifity06.css' containing a CSS property specified as !important. This is overwritten anyway with a CSS animation of higher priority as !important.
The main test is to save the stylesheet cssspecifity06.css on the local computer and to use it as a user style sheet. That this style is really used is indicated with a darkened stroke as for the choice of 'cssspecifity06.css' as alternate style. Only a user style sheet with !important will overwrite the CSS animation.
If something red gets visible in this case, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no interactivity
KSVG1fail no interactivity
WebKit 528.16fail no CSS choice
Adobefail no CSS choice, no user style
Squiggle 1.7fail user style available but not applied or !important ignored
Opera8.02/50/ 9tp1/2fail no CSS choice, animation not overwritten by user style
Opera9beta1/2failno interactivity
Opera9.00/9.10fail animation not overwritten by user style
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail !important ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail not obvious how to apply user stylesheet in test browser firefox
Test results Styling
user-agentSVG 1.1 + CSS
user-agentSVG 1.1 + CSS
Amaya9.51/ 11.3.1 0/12
KSVG1 1/12
WebKit 528.16 6/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

Interactivity

Events are defined in SVG tiny and may have influence on animation. See samples in the chapter animation.

pointer-events

e2005-10-05-01: 兌Q
discrete animation of the pointer-events property:
The pointer-events none, all and visible are tested. If the text says 'all' a click on the large circle will change the fill of the small circle to magenta for 1s, independent if something from the circle is visible or not. If the text says 'visible', this is just possible, if the circle is visible. If the text says 'none' nothing happens with a click. Whether the fill is none or not has no influence on the pointer event.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong or ignored
KSVG1fail element ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2fail element ignored
Opera9tp1fail element ignored, wrong animation with 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.0fail visible wrong
Gecko 12.0/ 24.0/ 36.0/ 48.0fail keine Interaktivit酹

e2005-10-05-02: 兌Q
discrete animation of the pointer-events property:
The pointer-events none, fill and visibleFill are tested. If the text says 'fill' a click on the fill of the large circle will change the color of the small circle to magenta for 1s, independent if something from the large circle is visible or not. If the text says 'visibleFill', this is just possible, if the large circle is visible. If the text says 'none' nothing happens with a click.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong or ignored
KSVG1fail element ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2fail element ignored
Opera9tp1fail not testable, wrong animation with calcMode discrete of 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.0fail visibleFill wrong
Gecko 12.0/ 24.0/ 36.0/ 48.0fail keine Interaktivit酹

e2005-10-05-03: 兌Q
discrete animation of the pointer-events property:
The pointer-events none, stroke and visibleStroke are tested. If the text says 'stroke' a click on the stroke of the large circle will change the color of the small circle to magenta for 1s, independent if something from the large circle is visible or not. If the text says 'visibleStroke', this is just possible, if the large circle is visible. If the text says 'none' nothing happens with a click.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong or ignored
KSVG1fail element ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2fail element ignored
Opera9tp1fail not testable, wrong animation with calcMode discrete of 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.0fail visibleStroke wrong
Gecko 12.0/ 24.0/ 36.0/ 48.0fail keine Interaktivit酹

e2005-10-05-04: 兌Q
discrete animation of the pointer-events property:
The pointer-events none, painted and visiblePainted are tested. If the text says 'painted' a click on a painted part of the large circle will change the fill of the small circle to magenta for 1s, independent if something from the circle is visible or not. If the text says 'visiblePainted', this is just possible, if the circle is visible. If the text says 'none' nothing happens with a click. If the fill is none, it is not painted, resulting in no pointer event.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong or ignored
KSVG1fail element ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2fail element ignored
Opera9tp1fail not testable, wrong animation with calcMode discrete of 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.0fail keine Interaktivit酹

e2006-09-05-11: 兌Q
opacity and pointer-events:
A white circle covers a light blue circle completely. Both have pointer-events all. The fill of the light blue circle can set to blue for 1s with a click on the light blue circle. First the fill-opacity of the white circle is animated from 0.8 to 0 in 5s. It is not mentioned in the specification that opaque object cannot receive events, therefore if clicked nothing happens until the display of the white circle is set to none at 10s. This is indicated with a blue stroke.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong or ignored
KSVG1fail no interactivity
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta1/2fail element ignored
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.0fail keine Interaktivit酹

cursor property

e2005-10-05-11: 利
discrete animation of the cursor property:
The cursor over the circle is set to the following values, changing every 3s: auto;crosshair;default;pointer;move;e-resize;ne-resize;nw-resize;n-resize; se-resize;sw-resize;s-resize;w-resize;text;wait;help. The stroke changes just to give the timing.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail property ignored
WebKit 528.16fail property ignored
Adobefail property ignored
Squiggle 1.7fail changed cursor becomes only visible, if the cursor is moved out and in again.
Opera8.02/50/ 9tp1/2/beta1fail property ignored
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00fail changed cursor becomes only visible, if the cursor is moved out and in again.
Opera11.60/ 12,00fail changed cursor becomes only visible, if the cursor is moved.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-05-12: 兌Q
discrete animation of the cursor property:
The cursor over the circle is set for 6s to url(cursor1.png) after a click on the circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail property ignored
WebKit 528.16fail if the pointer is already the image, another click removes the image again
Adobefail property ignored
Squiggle 1.7fail property ignored, wrong error message
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,00fail property ignored
Gecko 2.0/ 8.0ok -
Gecko 12.0/ 24.0/ 36.0/ 48.0fail keine Interaktivit酹

cursor element

e2005-10-05-21: 利
set animation of the xlink:href attribute of the cursor element:
The cursor attribute xlink:href is set from cursor3.png to cursor4.png after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail element ignored
WebKit 528.16fail element ignored
Adobefail element ignored
Squiggle 1.7fail element ignored
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,00fail element ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail element ignored

e2005-10-05-22: 利
animate animation of the x and y attributes of the cursor element:
The cursor attributes x and y are changed after 3s with repetition.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail element ignored
WebKit 528.16fail element ignored
Adobefail element ignored
Squiggle 1.7fail element ignored
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,00fail element ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail element ignored
Test results Interactivity
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/9
KSVG1 0/9
WebKit 528.16 5/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

Gradients and Patterns

Amaya9.51 does not support gradients or patterns in general; Amaya11.3.1 does not interprete them or interpretes them wrong and does not animate them; Squiggle 1.7 does not animate gradients in general and displays often mysterious or even wrong error messages.

linearGradient

e2005-10-08-01: 利
animation of the gradientUnits of a linearGradient:
gradientUnits is set from objectBoundingBox to userSpaceOnUse after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no animation, Opera uses always objectBoundingBox and never userSpaceOnUse, even without 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: 利
set animation of x1, x2, y1, y2 of a linearGradient:
x1, x2, y1, y2 are set to other values, starting after 3s, each next one 3s later. The result is, that the colours are exchanged from red-blue to blue-red. A gray line indicates the gradient direction.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail just the first set, the others are ignored.
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: 利
animation of x1, x2, y1, y2 of a linearGradient:
x1, x2, y1, y2 are animated starting after 3s, animating each of them for 3s. The result is, that the colours are exchanged from red-blue to blue-red. A gray line indicates the gradient direction.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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: 利
animation of the spreadMethod of a linearGradient:
The spreadMethod is changed all 3s from pad to reflect to repeat to pad.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok -
Opera8.02/50fail no 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: 利
animation of the xlink:href of a linearGradient:
The xlink:href from fill is changed from lG1 to lG2, changing the gradient from red-blue to yellow-magenta after 3s for 3s. The xlink:href from stroke is changed from lG2 to lG1, changing the gradient from yellow-magenta to red-blue after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no animation
Opera9tp1fail no 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: 利
animation of the gradientTransform of a linearGradient:
The gradientTransform is used to perform an animateTransform rotate.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok -
Opera8.02/50fail no 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 -
Test results linearGradient
user-agentSVG 1.1
user-agentSVG 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: 利
animation of the gradientUnits of a radialGradient:
gradientUnits is set from objectBoundingBox to userSpaceOnUse after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no animation, Opera uses always objectBoundingBox and never userSpaceOnUse, even without 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: 利
set animation of cx, cy and r of a radialGradient:
cx, cy and r are set to other values, starting after 3s, each of them for 3s. Centers are indicated with small gray circles.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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: 利
animation of cx, cy and r of a radialGradient:
cx, cy and r are animated starting after 3s, animating each of them for 3s. Center values are indicated with small gray circles.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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 (disturbances in tp2)
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-09-04: 利
set animation of fx, and fy of a radialGradient:
fx and fy are set to other values, starting after 3s, each of them for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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: 利
animation of fx and fy of a radialGradient:
fx, and fy are animated starting after 3s, animating each of them for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Opera8.02/5/ 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: 利
animation of the spreadMethod of a radialGradient:
The spreadMethod is changed all 3s from pad to reflect to repeat to pad.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok -
Opera8.02/50fail no 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: 利
animation of the xlink:href of a radialGradient:
The xlink:href from fill is changed from lG1 to lG2, changing the gradient from orange-blue to green-magenta after 3s for 3s. The xlink:href from stroke is changed from lG2 to lG1, changing the gradient from green-magenta to orange-blue after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail wrong gradient
Adobeok -
Opera8.02/50fail no animation, wrong interpretation of fx,fy outside r
Opera9tp1fail no animation, wrong interpretation of fx,fy outside 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: 利
animation of the gradientTransform of a radialGradient:
The gradientTransform is used to perform an animateTransform of skewX and skewY.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok -
Opera8.02/50fail no 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 -
Test results radialGradient
user-agentSVG 1.1
user-agentSVG 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: 利
set animation of the gradient stops:
One gradient stop is set from 0 to 0.25 after 3s, the other from 1 to 0.75 after 6s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no 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: 利
animation of the gradient stops:
One gradient stop is changed from 0 to 0.25 within 3s, the other from 1 to 0.75 after 3s within 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no 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: 利
set animation of the gradient stop-color:
One gradient stop-color property is set from #ff00ff to #008800 after 3s, the other from #00ff00 to #ff88ff after 6s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Opera8.02/50fail no 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: 利UA
animation of the gradient stop-color:
One gradient stop-color is changed from #ffaa00 to #00aaff within 3s, the other from #0000ff to #ff00aa after 3s within 3s (animateColor).
superposition without interaction of random radial waves
With each try, a new random choice is performed (animateColor).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail gradient not repeated for the waves example
Adobeok -
Opera8.02/50/ 9tp1/2/ beta1fail no 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 -
Geck0 2.0fail no animateColor

e2006-02-27-01: 利UA
animation of the gradient stop-color:
One gradient stop-color is changed from #ffaa00 to #00aaff within 3s, the other from #0000ff to #ff00aa after 3s within 3s (animate).
superposition without interaction of random radial waves
With each try, a new random choice is performed (animate).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail gradient not repeated for the waves example, discrete animation?
Adobeok -
Opera8.02/50fail no 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: 利
set animation of the gradient stop-opacity:
One gradient stop-opacity property is set from 1 to 0.3 after 3s, the other from 1 to 0.3 after 6s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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: 利
animation of the gradient stop-opacity:
One gradient stop-opacity is changed from 1 to .3 within 3s, the other from 1 to .3 after 3s within 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no 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 -
Test results gradient stops
user-agentSVG 1.1
user-agentSVG 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
Test results Gradients
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/21
KSVG1 2/21
WebKit 528.16 14/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

Pattern

e2005-10-14-01: 利
animation of the patternUnits of a pattern:
patternUnits is set from objectBoundingBox to userSpaceOnUse after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1ok -
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail wrong 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.0fail wrong pattern size
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-02: 利
animation of the patternContentUnits of a pattern:
patternContentUnits is set from objectBoundingBox to userSpaceOnUse after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail no or wrong 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: 利
animation of the patternTransform of a pattern:
patternTransform is animated with several skewX values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail no pattern, no 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.0fail wrong pattern size
Gecko 24.0/ 36.0/ 48.0fail wrong pattern for strong skew

e2005-10-14-04: 利
set animation of the x, y, width, and height of a pattern:
x, y, width, and height are set to different values, each after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail no pattern, no 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.0fail wrong pattern size
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-05: 利
animation of the x, y, width, and height of a pattern:
x, y, width, and height are changed to different values with repetition.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail no pattern, no 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.0fail wrong pattern size
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-14-06: 利
animation of the xlink:href of a pattern:
xlink:href is set from one pattern to another after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
KSVG1fail no animation
WebKit 528.16fail no pattern
Adobeok -
Opera8.02/50fail no pattern
Opera9tp1/2/ beta1fail no pattern, no animation (wrong 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.0fail wrong pattern size
Gecko 24.0/ 36.0/ 48.0ok -
Test results Patterns
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/6
KSVG1 1/6
WebKit 528.16 0/6
Adobe 6/6
Squiggle 1.7 0/6 *
Opera8.02/50/ 9tp1/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 does not animate pattern, typically the pattern itself is wrong and often wrong error messages are displayed.

Clipping, Masking and Compositing

Clipping

e2005-10-15-01: 利
animation of the overflow property:
The overflow property of an embedded svg is set from hidden to visible after 3s. The visible effect is, that first just a centered light blue square is visible, after 3s a dark blue square becomes visible surround the light blue square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail embedded svg and overflow ignored, no animation
Opera9tp1fail no 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: 利
animation of the overflow property:
The overflow property of an embedded svg is changed with the values auto, scroll, visible, hidden, within 12s. According to the specification, auto and visible have the same effect and hidden and scroll have the same visible effect. The visible effect is, that first a centered light blue square surrounded by a dark blue square is visible. In the next animation step just the light blue square is visible. Then again the light blue square surrounded with the dark blue one and then just the light blue one again. After 12s it switches back to visible dark blue and light blue one.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail no scroll, no auto
Squiggle 1.7fail no animation
Opera8.02/50fail embedded svg and overflow ignored, no animation
Opera9tp1fail no animation, attribute ignored
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: 利
animation and the overflow property:
We have two embedded svgs with moving circle. One orange moves from left to right, one blue from right to left. Each of them is in its own svg. Because the border of both is in the middle (marked with a thin line), both vanish in the middle like in an annihilation. This is for overflow hidden. In a second turn after 10s both overflows are set to visible. The circles will continue their motion in the box of the other circle and will not vanish.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failanimation not reproducible, repetition ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7failproperty ignored or not animated
Opera8.02/50failwrong display of svg elements and no animation
Opera9tp1fail property ignored, nonsense or no 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: 利
overflow and animated svg element:
overflow is animated with the values hidden;visible;inherit;auto;scroll for an animated svg element. The animated svg element contains a blue circle on a white rectangle, which are both larger than the svg element, moving from top left to bottom right with a repetition. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation
WebKit 528.16fail wrong timing
Adobefail wrong auto
Squiggle 1.7failproperty ignored or not animated
Opera8.02/50failno animation
Opera9tp1fail property ignored or no 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.0fail wrong auto
Gecko 24.0/ 36.0/ 48.0fail wrong inherit and scroll

e2008-03-07-02: 利
overflow and animated symbol:
overflow and animated symbol element. overflow is animated with the values hidden;visible;inherit;auto;scroll for a symbol. The symbol contains a blue circle on a white rectangle, which are both larger than the animated viewBox of the symbol. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left. The area for the symbol defined by a use element is indicated with a thin black stroked rectangle, if clipped, fragments of the symbol are only inside this rectangle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation
WebKit 528.16fail confused display
Adobefail wrong auto
Squiggle 1.7failproperty ignored or not animated, several error messages
Opera8.02/50failno symbol, no animation
Opera9tp1fail no animation, always visible
Opera9tp2fail always visible
Opera9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00fail wrong inherit
Opera11.60/ 12,00fail ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno animation

e2008-03-07-03: 利
overflow and animated image element:
overflow is animated with the values hidden;visible;inherit;auto;scroll for an animated image element. The animated image references a simple SVG document containing a blue circle on a white rectangle, which are both larger than the image element, moving from top left to bottom right with a repetition. overflow in the referenced document is ignored. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation
WebKit 528.16fail no animation
Adobefail wrong auto
Squiggle 1.7failwrong initial value, animation wrong
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10failno (SVG) image
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00fail ignored
Gecko 2.0/ 8.0/ 12.0failignored
Gecko 24.0/ 36.0/ 48.0failwrong auto

e2008-03-07-04: 利
overflow and animated marker:
overflow and animated marker element. overflow is animated with the values hidden;visible;inherit;auto;scroll for a marker. The marker contains a blue circle on a white rectangle, which are both larger than the animated viewBox of the marker. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left. The areas for the markers are indicated with a thin black stroked rectangle, if clipped, fragments of the marker are only inside these rectangles.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation
WebKit 528.16fail confused display
Adobefail wrong default, auto and scroll
Squiggle 1.7failwrong error message, claims that viewBox is not animatable
Opera8.02/50/ 9tp1/2/ beta1failno marker
Opera9beta 2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00fail inherit wrong
Opera11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong auto

e2008-03-07-05: 利
overflow and animated marker:
overflow and animated marker element (referenced with marker-start, marker-end, marker-mid). overflow is animated with the values hidden;visible;inherit;auto;scroll for a marker. The marker contains a blue circle on a white rectangle, which are both larger than the animated viewBox of the marker. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left. The areas for the markers are indicated with a thin black stroked rectangle, if clipped, fragments of the marker are only inside these rectangles.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation
WebKit 528.16fail confused display
Adobefail wrong default, auto and scroll
Squiggle 1.7failwrong error message, claims that viewBox is not animatable
Opera8.02/50/ 9tp1failno marker
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00fail inherit wrong
Opera11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong auto

e2008-03-07-06: 利
overflow and animated pattern:
overflow is animated with the values hidden;visible;inherit;auto;scroll for a pattern. The pattern contains a blue circle on a white rectangle (both with fill-opacity 0.5), which are both larger than the animated viewBox of the pattern. The overflow animation starts at 5s. If it is visible or auto, the white rectangle and the blue circle are not clipped. The timing is indicated with a related text bottom left. The area for the pattern defined by a use element is indicated with a thin black stroked rectangle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1failno animation, sometimes surprising colors
WebKit 528.16fail wrong timing
Adobefail no animation for overflow
Squiggle 1.7failprovides error messages
Opera8.02/50/ 9tp1failno pattern
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,00failno animation for overflow
Gecko 2.0/ 8.0/ 12.0fail ignored, wrong pattern size
Gecko 24.0/ 36.0/ 48.0fail ignored

e2005-10-15-11: 判
animation of the clip property:
The clip property of an embedded svg is set from rect(200, 200, 200, 200) to auto after 3s. The visible effect is, that first just a centered magenta square is visible, after 3s a blue square becomes visible surround the magenta square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clip ignored, no animation
WebKit 528.16fail clip ignored, no animation
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50fail embedded svg and clip ignored, no animation
Opera9tp1fail clip ignored, no 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,00fail embedded svg and clip ignored, no animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no initial magneta square

e2005-10-15-12: 判
animation of the clip property:
The clip property of an embedded svg changes from rect(200, 200, 200, 200) to rect(0, 0, 0, 0) in 3s. Both are marked in gray. The visible effect is, that first just a centered red square is visible, after 3s a blue square becomes visible surround the red square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clip ignored, no animation
WebKit 528.16fail clip ignored, no animation
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50fail embedded svg and clip ignored, no animation
Opera9tp1fail clip ignored, no 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,00fail embedded svg and clip ignored, no animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation

e2009-03-01-01: 判
animation of the clip property of an image:
With clip an image is clipped within an animation. The correct cut-out is indicated with a blue stroked rectangle. The complete image is deposed partly transparent.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clip ignored, no animation
WebKit 528.16fail clip ignored, no animation
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1/tp2fail clip ignored, no 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,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong animation

e2005-10-15-21: 利
animation of the clipPath element:
clipPathUnits is animated from objectBoundingBox to userSpaceOnUse after 3s. This changes mainly the size of the shape as a visible effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clipPath wrong, no animation
WebKit 528.16failclipPath wrong
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail clipPath ignored, no 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.0fail no animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-15-22: 利
animation of the clipPath element:
The transform attribute is animated, using the types skewX and skewY.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail wrong
KSVG1fail clipPath wrong, no animation
WebKit 528.16failclipPath wrong, no animation
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail clipPath ignored, no animation
Opera9tp1/2fail no 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,00fail no animation
Gecko 2.0/ 8.0/ 12.0fail clipPath wrong
Gecko 24.0/ 36.0/ 48.0ok -

e2005-10-15-23: 利
animation of the clip-path property:
The clip-path property is set from a shape given by a clipPath to none after 3s. The shape changes to a square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clipPath wrong
WebKit 528.16failclipPath wrong
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail clipPath ignored, no animation
Opera9tp1/2/ beta1/2fail no 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: 利
animation of the clip-path property:
The clip-path property is changed between three clipPaths within 9s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail clipPath wrong, no animation
WebKit 528.16failclipPath wrong
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail clipPath ignored, no animation
Opera9tp1fail wrong 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: 利
animation of the clip-rule property:
The clip-rule property is set from evenodd to nonzero after 3s. The overlap of two squares first is not colored then in the same colour as the squares.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second clipPath wrong
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail clipPath ignored, no 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: 利U
animation of the clip path:
The path inside the clipPath element is animated with several values for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail nothing displayed, crashes
WebKit 528.16failno display
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail clipPath ignored, no 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 -
Test results Clipping
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/18
KSVG1 1/18
WebKit 528.16 4/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

Masking

e2005-10-16-01: 利
set animation of the mask element:
maskUnits is animated from objectBoundingBox to userSpaceOnUse after 3s. This changes mainly the size of the shape as a visible effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok *
WebKit 528.16failno mask
Adobeok *
Squiggle 1.7fail no animation
Opera8.02/50fail mask element ignored
Opera9tp1/2/ beta1/2/ 9.00/9.10fail no animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok *
Opera11.60/ 12,00fail triangle wrong positioned
Gecko 2.0/ 8.0fail no animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok *

* Note that the results from masking are different - the same for KSVG1 and Squiggle, different results for Opera and Adobe.

e2005-10-16-02: 利
set animation of the mask element:
maskContentUnits is animated from objectBoundingBox to userSpaceOnUse after 3s. This changes mainly the size of the shape as a visible effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16failno mask
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail mask element ignored
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,00fail triangle wrong positioned
Gecko 2.0/ 8.0fail no animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-03: 利
animation of the mask element:
x, y, width and height are animated within 12s. This changes mainly the size of the visible part of the masked element.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16failno mask
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50fail mask element ignored
Opera9tp1/2/ beta1/2/ 9.00/9.10fail no animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00fail triangle wrong positioned
Gecko 2.0/ 8.0fail no animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-04: 利
set animation of the mask property:
The mask property is animated from a mask to none after 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16failno mask
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail mask element ignored
Opera9tp1/2/ beta1/2fail no animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00fail triangle wrong positioned
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-10-16-05: 利
animation of the mask property:
The mask property is animated between three different shapes in 9s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no or wrong animation
WebKit 528.16failno mask
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail mask element ignored
Opera9tp1/ beta2fail wrong animation, beta2 ignores third mask
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,00fail triangle of first mask wrong positioned
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results Masking
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/5
KSVG1 2/5
WebKit 528.16 0/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 4/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

* The result for masking itself looks different in Squiggle 1.7 in comparison with Opera or the adobe plugin - wrong?

Opacity

fill-opacity, stroke-opacity and stop-opacity are already tested in the correlating sections.

e2005-10-15-51: 利
set animation of the opacity property:
Several shapes in a group change their opacity from 1 to 0.8 after 3s. fill-opacity and stroke-opacity are given too, but not animated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail area of opacity incomplete
Amaya11.3.1ok -
KSVG1fail no animation for groups
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: 利
animation of the opacity property:
Several shapes in a group change their opacity from 1 to 0 within 12s and is freezed. fill-opacity and stroke-opacity are given too, but not animated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail area of opacity incomplete
Amaya11.3.1ok -
KSVG1fail no animation for groups
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: 利
animation of the opacity property:
(mainly for Amaya and KSVG:) The text 'test' changes the opacity from 1 to 0 within 12s and is freezed. fill-opacity and stroke-opacity are given too, but not animated.

Test results
user-agentresultcomment
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-18-01: 利
animation of the opacity property:
For four JPEG images the opacity is changed from 1 to 0 or from 1 to 0 within 12s with a begin at 2s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no 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: 利
additivity of opacity:
Several shapes in a group are referenced with a use element. This changes its opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect. fill-opacity and stroke-opacity are given too, but not animated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail area of opacity incomplete, wrong animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail no 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: 利
additivity of opacity:
Several shapes in a group are referenced with a use element. This changes its with out of range values and opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect. fill-opacity and stroke-opacity are given too, but not animated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail area of opacity incomplete, wrong animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail no 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.0fail wrong animation
Test results Opacity
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51 1/6
Amaya11.3.1 3/6
KSVG1 1/6
WebKit 528.16 6/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