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: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | no animation and CSS |
| Opera9tp1/2 | fail | no animation |
| Opera9 beta1/2/ 9.00/9.10 | fail | wrong second CSS |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera10.0 beta/ 10.0 | fail | no set animation |
| Gecko 2.0 | fail | no animation |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-26-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | no animation and CSS |
| Opera9tp1/2 | fail | no animation |
| Opera9 beta1/2/ 9.00/9.10 | fail | wrong second CSS |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera10.0 beta/ 10.0 | fail | no set animation |
| Gecko 2.0 | fail | no animation |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-26-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9beta1/2/ 9.00/9.10 | fail | no animation and CSS |
| Opera9tp1/2 | fail | no animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0 | fail | no animation |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-07-13-01: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | fail | no choice, presents animation |
| Adobe | fail | no choice, presents animation and
style c ? |
| Squiggle 1.7 | fail | no switch back to no style, no change with :hover |
| Opera8.02/50 | fail | no CSS |
| Opera9tp1 | fail | 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,00 | ok | - |
| 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.0/ 60.0 | ok | - |
e2006-07-13-02: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no hover |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | ok | - |
| Adobe | fail | no :hover or animation |
| Squiggle 1.7 | fail | no :hover or animation |
| Opera8.02/50 | fail | 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,00 | ok | - |
| 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.0/ 60.0 | ok | - |
e2006-07-13-03: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation and CSS |
| WebKit 528.16 | fail | link does not work while animation is running, :visited does not work |
| Adobe | fail | no pseudo classes |
| Squiggle 1.7 | fail | no pseudo classes |
| Opera8.02/50 | fail | no CSS |
| Opera9tp1/2 | fail | CSS incomplete |
| Opera9beta1/2 | fail | no interactivity |
| 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 | fail | view element support corrupted in this version |
| Opera10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | text-decoration wrong |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no interactivity |
e2007-02-24-01: §M(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no CSS |
| KSVG1 | fail | no CSS |
| WebKit 528.16 | ok | - |
| Adobe | fail | attributeType ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-02-24-02: §M(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | no CSS |
| Opera9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | wrong underlying value |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera 11.60/ 12,00 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-24-03: §M(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no CSS |
| KSVG1 | fail | no CSS |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | ok | - |
| Opera9tp1 | fail | wrong animation (looks exciting) |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | fail | wrong animation |
| Opera10.60/ 11.00 | ok | - |
| Opera 11.60/ 12,00 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-24-04: §M(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no CSS |
| KSVG1 | fail | no CSS |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | wrong animation |
| Opera9tp1 | fail | 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,00 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-24-05: §M(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-24-06: §IM(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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | no CSS choice |
| Adobe | fail | no CSS choice, no user style |
| Squiggle 1.7 | fail | user style available but not applied or !important ignored |
| Opera8.02/50/ 9tp1/2 | fail | no CSS choice, animation not overwritten by user style |
| Opera9beta1/2 | fail | no interactivity |
| Opera9.00/9.10 | fail | 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,00 | fail | !important ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | not obvious how to apply user stylesheet in test browser firefox |
Test results Styling
| user-agent | SVG 1.1 + CSS |
| user-agent | SVG 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/ 60.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: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | element ignored |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0 | fail | visible wrong |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
| Gecko 60.0 | ok | - |
e2005-10-05-02: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | element ignored |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0 | fail | visibleFill wrong |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
| Gecko 60.0 | ok | - |
e2005-10-05-03: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | element ignored |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | fail | visibleStroke wrong |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
e2005-10-05-04: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | element ignored |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
| Gecko 60.0 | fail | visiblePainted wrong |
e2006-09-05-11: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or ignored |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
cursor property
e2005-10-05-11: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | property ignored |
| WebKit 528.16 | fail | property ignored |
| Adobe | fail | property ignored |
| Squiggle 1.7 | fail | changed cursor becomes only visible, if the
cursor is moved out and in again. |
| Opera8.02/50/ 9tp1/2/beta1 | fail | property ignored |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | changed cursor becomes only visible, if the
cursor is moved out and in again. |
| Opera11.60/ 12,00 | fail | changed cursor becomes only visible, if the
cursor is moved. |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-05-12: §IQ
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | property ignored |
| WebKit 528.16 | fail | if the pointer is already the
image, another click removes the image again |
| Adobe | fail | property ignored |
| Squiggle 1.7 | fail | 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,00 | fail | property ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | keine Interaktivität |
cursor element
e2005-10-05-21: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | fail | element ignored |
| Adobe | fail | element ignored |
| Squiggle 1.7 | fail | 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,00 | fail | element ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | element ignored |
e2005-10-05-22: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | element ignored |
| WebKit 528.16 | fail | element ignored |
| Adobe | fail | element ignored |
| Squiggle 1.7 | fail | 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,00 | fail | element ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | element ignored |
Test results Interactivity
| user-agent | SVG 1.1 |
| user-agent | SVG 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 |
| Gecko 60.0 | 5/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: §Q
animation of the gradientUnits of a linearGradient:
gradientUnits is set from objectBoundingBox to userSpaceOnUse after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-08-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | just the first set, the others are ignored. |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-08-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-08-04: §Q
animation of the spreadMethod of a linearGradient:
The spreadMethod is changed all 3s from pad to reflect to repeat to pad.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-08-05: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-08-06: §Q
animation of the gradientTransform of a linearGradient:
The gradientTransform is used to perform an animateTransform rotate.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results linearGradient
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.0 | 6/6 |
radialGradient
e2005-10-09-01: §Q
animation of the gradientUnits of a radialGradient:
gradientUnits is set from objectBoundingBox to userSpaceOnUse after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | (disturbances in tp2) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-04: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-05: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-06: §Q
animation of the spreadMethod of a radialGradient:
The spreadMethod is changed all 3s from pad to reflect to repeat to pad.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-07: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong gradient |
| Adobe | ok | - |
| Opera8.02/50 | fail | no animation, wrong interpretation of fx,fy outside r |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-09-08: §Q
animation of the gradientTransform of a radialGradient:
The gradientTransform is used to perform an animateTransform of skewX and skewY.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results radialGradient
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.0 | 8/8 |
Gradient stops
e2005-10-10-01: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-10-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-10-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-10-04: §QUA
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | gradient not repeated for the waves example |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Geck0 2.0 | fail | no animateColor |
e2006-02-27-01: §QUA
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | gradient not repeated for the waves example, discrete animation? |
| Adobe | ok | - |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-10-05: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-10-06: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results gradient stops
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.0 | 6/7 |
Test results Gradients
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.0 | 20/21 |
Pattern
e2005-10-14-01: §Q
animation of the patternUnits of a pattern:
patternUnits is set from objectBoundingBox to userSpaceOnUse after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-14-02: §Q
animation of the patternContentUnits of a pattern:
patternContentUnits is set from objectBoundingBox to userSpaceOnUse after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-14-03: §Q
animation of the patternTransform of a pattern:
patternTransform is animated with several skewX values.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong pattern for strong skew |
e2005-10-14-04: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-14-05: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-14-06: §Q
animation of the xlink:href of a pattern:
xlink:href is set from one pattern to another after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no pattern |
| Adobe | ok | - |
| Opera8.02/50 | fail | no pattern |
| Opera9tp1/2/ beta1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results Patterns
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.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: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | embedded svg and overflow ignored, no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | no scroll, no auto |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | embedded svg and overflow ignored, no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | animation not reproducible, repetition ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | property ignored or not animated |
| Opera8.02/50 | fail | wrong display of svg elements and no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-07-01: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong timing |
| Adobe | fail | wrong auto |
| Squiggle 1.7 | fail | property ignored or not animated |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | wrong auto |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong inherit and scroll |
e2008-03-07-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | confused display |
| Adobe | fail | wrong auto |
| Squiggle 1.7 | fail | property ignored or not animated, several error messages |
| Opera8.02/50 | fail | no symbol, no animation |
| Opera9tp1 | fail | no animation, always visible |
| Opera9tp2 | fail | always visible |
| Opera9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | wrong inherit |
| Opera11.60/ 12,00 | fail | ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2008-03-07-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | wrong auto |
| Squiggle 1.7 | fail | wrong initial value, animation wrong |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | no (SVG) image |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | ignored |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored |
| Gecko 24.0/ 36.0/ 48.0 | fail | wrong auto |
| Gecko 60.0 | fail | no animation of the attribute |
e2008-03-07-04: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | confused display |
| Adobe | fail | wrong default, auto and scroll |
| Squiggle 1.7 | fail | wrong error message, claims that viewBox is not animatable |
| Opera8.02/50/ 9tp1/2/ beta1 | fail | no marker |
| Opera9beta 2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | inherit wrong |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong auto |
e2008-03-07-05: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | confused display |
| Adobe | fail | wrong default, auto and scroll |
| Squiggle 1.7 | fail | wrong error message, claims that viewBox is not animatable |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | inherit wrong |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong auto |
e2008-03-07-06: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, sometimes surprising colors |
| WebKit 528.16 | fail | wrong timing |
| Adobe | fail | no animation for overflow |
| Squiggle 1.7 | fail | provides error messages |
| Opera8.02/50/ 9tp1 | fail | no 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,00 | fail | no animation for overflow |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored, wrong pattern size |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | ignored |
e2005-10-15-11: §P
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clip ignored, no animation |
| WebKit 528.16 | fail | clip ignored, no animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | embedded svg and clip ignored, no animation |
| Opera9tp1 | fail | clip ignored, no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | embedded svg and clip ignored, no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no initial magneta square |
e2005-10-15-12: §P
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clip ignored, no animation |
| WebKit 528.16 | fail | clip ignored, no animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | embedded svg and clip ignored, no animation |
| Opera9tp1 | fail | clip ignored, no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | embedded svg and clip ignored, no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2009-03-01-01: §P
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clip ignored, no animation |
| WebKit 528.16 | fail | clip ignored, no animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1/tp2 | fail | clip ignored, no animation |
| Opera9beta1/2/ 9.00/9.10/ 10.60 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 11.00/11.60/ 12,00 | fail |
wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | wrong animation |
| Gecko 60.0 | fail | no animation of the attribute |
e2005-10-15-21: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clipPath wrong, no animation |
| WebKit 528.16 | fail | clipPath wrong |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0 | fail | no animation |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-22: §Q
animation of the clipPath element:
The transform attribute is animated, using the types skewX and skewY.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong |
| KSVG1 | fail | clipPath wrong, no animation |
| WebKit 528.16 | fail | clipPath wrong, no animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | clipPath ignored, no animation |
| Opera9tp1/2 | fail | no animation |
| Opera9 beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0 | fail | clipPath wrong |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-23: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clipPath wrong |
| WebKit 528.16 | fail | clipPath wrong |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | clipPath ignored, no animation |
| Opera9tp1/2/ beta1/2 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-24: §Q
animation of the clip-path property:
The clip-path property is changed between three clipPaths
within 9s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | clipPath wrong, no animation |
| WebKit 528.16 | fail | clipPath wrong |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | clipPath ignored, no animation |
| Opera9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-25: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second clipPath wrong |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-26: §QU
animation of the clip path:
The path inside the clipPath element is animated with
several values for 20s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | nothing displayed, crashes |
| WebKit 528.16 | fail | no display |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results Clipping
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.0 | 9/18 |
Masking
e2005-10-16-01: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | * |
| WebKit 528.16 | fail | no mask |
| Adobe | ok | * |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | mask element ignored |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | no animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | * |
| Opera11.60/ 12,00 | fail | triangle wrong positioned |
| Gecko 2.0/ 8.0 | fail | no animation |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | * |
* Note that the results from masking are different - the same for KSVG1 and Squiggle, different results for Opera and Adobe.
e2005-10-16-02: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no mask |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | 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.00 | ok | - |
| Opera11.60/ 12,00 | fail | triangle wrong positioned |
| Gecko 2.0/ 8.0 | fail | no animation |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-16-03: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no mask |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | mask element ignored |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | no animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | triangle wrong positioned |
| Gecko 2.0/ 8.0 | fail | no animation |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-16-04: §Q
set animation of the mask property:
The mask property is animated from a mask to none after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | no mask |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | mask element ignored |
| Opera9tp1/2/ beta1/2 | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | triangle wrong positioned |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-16-05: §Q
animation of the mask property:
The mask property is animated between three different shapes in 9s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no or wrong animation |
| WebKit 528.16 | fail | no mask |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | mask element ignored |
| Opera9tp1/ beta2 | fail | 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.00 | ok | - |
| Opera11.60/ 12,00 | fail | triangle of first mask wrong positioned |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results Masking
| user-agent | SVG 1.1 |
| user-agent | SVG 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/ 60.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: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | area of opacity incomplete |
| Amaya11.3.1 | ok | - |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-52: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | area of opacity incomplete |
| Amaya11.3.1 | ok | - |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-15-53: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-18-01: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-13-11: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | area of opacity incomplete, wrong animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-13-12: §Q
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-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | area of opacity incomplete, wrong animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | wrong animation |
| Gecko 60.0 | ok | - |
Test results Opacity
| user-agent | SVG 1.1 |
| user-agent | SVG 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 |
| Gecko 60.0 | 6/6 |
