In the chapter 'Animatable Attributes and Properties' we used simple animation for any attributes, now we animate more or less simple shapes in a more sophisticated way and with special attributes for animation.
In general the target element of an animation is identified with an id-attribute in this
element and a xlink:href attribute, referencing this id in the animation element.
If there is no xlink:href in an animation element, the animation targets the parent element
of an animation element.
Both is already tested in many examples in this project.
Note that the namespace for XLink is required, if attributes with xlink:... are used.
Other names but 'xlink' are possible, but inadvisable, if compatibility is to be achieved.
e2007-12-10-01: §M(1)P
identify the target element:
After 3s the colour of four circles is set to blue.
Different namespaces for xlink are chosen, one on the svg element,
two locally on the set elements.
The prefix xlink is defined for xmlns:xlink="http://www.w3.org/1999/xhtml"
for test purposes only.
The centered circle does not switch its colour to red, because the namespace
does not fit.
If the colour switches to (dark) red at 3s, the prefix is interpreted wrong.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | fail | SVG tiny 1.1; in this case, the validator is not able to identify the modified prefix |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | wrong 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 | - |
e2010-04-17-01: §M(1)P
identify the target element:
Several methods to identify the animation target element, including
an exotic case with an unusual prefix for the XLink namespace.
All rectangles increase their heights. The smaller blue ones have
to cover always the large red filled one with the dark blue stroke.
If something red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | fail | SVG tiny 1.1; in this case, the validator is not able to identify the modified prefix |
| 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 | - |
The xlink:href attribute identifies the target element for an event too, if no fragment identifier is given. For example an animation element with xlink:href="#test" begin="click" means, that the click event is related to #test and not to the parent element of the animation element. To avoid identification problems, authors can always add a fragment identifier: begin="text.click".
e2007-03-14-01: §IM(1)P
identify the event target:
Find the event target for begin="click" and given
xlink:href of an animation.
Three blue stroked circles can be animated.
The begin of each animation is started with
a click on the related circle.
This starts an animation of the cx of this circle.
If something red becomes visible or the related
animation does not start with a click, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | wrong animation, no interactivity |
| WebKit 528.16 | ok | - |
| Adobe | fail | wrong identification of the event target |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | identification correct, but second animation of the underlying red circle not started |
| Opera9tp1/2/ 9.00/9.10 | ok | - |
| Opera9beta1/2 | fail | no interactivity |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | (ok) | low timing accuracy for event bases |
| Opera11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for top red underlying circle ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | no interactivity |
The attribute attributeName identifies the target attribute or property. This is already tested in many examples of this project, therefore only an example with specific notations of namespaces. attributeName is not used in combination with animateMotion, see the related section.
e2010-04-18-01: §M(1)P
identify the target attribute:
Several methods to identify the animation target element, including
exotic cases with unusual prefixes for the SVG and XLink namespaces.
All rectangles increase their heights. The smaller blue ones have
to cover always the large red filled one with the dark blue stroke.
If something red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | fail | SVG tiny 1.1; in this case, the validator is not able to identify the modified prefix |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ko | only usual namespaces |
| Adobe | fail | only usual namespaces |
| Squiggle 1.7 | fail | wrong error message |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | only usual namespaces |
| 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 | wrong and is frozen |
| Gecko 8.0/ 12.0 | fail | crashes |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong |
The attribute attributeType is more useful in SVG basic or full, but not in
SVG tiny 1.1, because there is no CSS. Within SVG tiny 1.1 all animations with attributeType CSS
have to be ignored. For SVG and maybe with the future SVG tiny 1.2 this is different. In
the working draft SVG tiny 1.2 CSS is optional.
As already known from HTML+CSS the CSS
overwrites HTML, this is the same for XMLs like XHTML or SVG.
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 specificity 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."
This we can check:
e2005-09-22-01: §Q
attributeType:
Because CSS properties have a higher specificity in the CSS cascade as
XML attributes, CSS animation has to overwrite XML animation.
The colour of the circles changes
from yellow to blue and not from orange to red.
If the user-agent does not support CSS as for SVG tiny,
the colour should change from orange to
red and not from yellow to blue.
A mixture is an error anyway.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animation |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | wrong 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 | fail | no animation |
e2007-02-22-01: §M(1)Q
attributeType:
For a blue rectangle width and height is animated,
but for the width animation the attributeType is
set to CSS. Because there is no CSS width property
for rect, this has no visible effect, only the height
is animated, because the attributeType is set to
XML for this animation.
The animation is compared with an underlying
animated red rectangle. The blue rectangle covers
the red one always completely. If something
red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no CSS and animation |
| KSVG1 | fail | no CSS and attributeType ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | attributeType ignored |
| Opera8.02/50 | fail | no CSS and attributeType ignored |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | attributeType ignored |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | animates width |
e2007-05-09-01: §M(1)P
attributeType:
Several tests are provided:
If the attributeName identifies an attribute and there
is no property with the same name and attributeType
is CSS, there cannot be an animation.
If a CSS property exists, but is not applicable, but
an XML attributes exists with this name, there cannot be an
animation with attributeType CSS.
But for example font is a property without a related
XML attribute, therefore this is animated with
attributeType CSS, but not with XML.
If the attributeType is 'auto' but the attributeName
does not fit to the animated element, there is no animation.
If the attributeType is CSS, the animated property
exists but does not fit to the animated element,
there is no animation.
If something red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no CSS and animation |
| KSVG1 | fail | immediate crash with this example |
| WebKit 528.16 | fail | no animation of font-family |
| Adobe | fail | no animation of font-family |
| Squiggle 1.7 | fail | no animation of font-family, wrong error message |
| Opera8.02/50 | fail | no CSS and attributeType ignored |
| Opera9tp1 | fail | attributeType ignored |
| Opera9tp2 | fail | only the red polygon displayed |
| Opera9beta1 | fail | immediate crash with this example |
| Opera9beta2/ 9.00/9.10 | fail | attributeType wrong interpreted |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation of font-family |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | no animation of font-family |
| Gecko 60.0 | fail | several bugs |
e2005-09-22-02: §Q
attributeType:
SVG tiny 1.1 does not contain CSS. But the attributeType
of the animation of fill is CSS. Therefore the animation
has to be ignored for the given doctype and profile of
SVG tiny 1.1. If you see a red animation, it is wrong for
SVG tiny 1.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | attribute 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 | attribute ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | (ok) | no animateColor |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/5 | 1/8 |
| KSVG1 | 0/5 | 0/8 |
| WebKit 528.16 | 3/5 | 4/8 |
| Adobe | 1/5 | 4/8 |
| Squiggle 1.7 | 2/5 | 2/8 |
| Opera8.02/50 | 1/5 | 1/8 |
| Opera9tp1/2 | 3/5 | 4/8 |
| Opera9 beta1/2 | 2/5 | 3/8 |
| Opera9.00/9.10 | 3/5 | 4/8 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | 4/5 | 6/8 |
| Opera12,00 | 3/5 | 5/8 |
| Gecko 2.0/ 8.0 | 4/5 | 5/8 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | 3/5 | 4/8 |
| Gecko 60.0 | 4/5 | 4/8 |
The Timing section is moved. Use the given URI.
In the full profile of SVG 1.1 many values can contain Units. For tiny this is only available for width and height of the root element. Especially if different list items in values lists for animation have different units, the interpolation gets more complex.
Values with different units can be converted into the same unit system before a continuous animation can take place - or an interpolated presentation value is a combination of values of different units, that have to be converted into one value in device pixels to be presented.
e2010-07-01-01: §M(1)P
coordinates and lengths in cm and mm:
Width and height of the document are given as 10cm, the sizes of the objects inside
the document are given in cm. Some units within animation elements are mm.
Obviously 1cm is the same as 10mm.
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only cm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | discrete animation |
| Adobe | fail | mixture of discrete and continuous animation |
| Squiggle 1.7 | fail | wrong size (not 10cm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| 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 size (not 10cm) |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-01-02: §M(1)P
coordinates and lengths in cm, mm and in:
Width and height of the document are given as 10cm.
Sizes of objects within the document are given in cm, mm or in in (inches).
Obviously 1cm is the same as 10mm.
in is no standard unit. It is a derived unit 1in = 25.4mm.
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only cm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | discrete animation |
| Adobe | fail | discrete animation |
| Squiggle 1.7 | fail | wrong size (not 10cm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| 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 size (not 10cm) |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-01-03: §M(1)P
coordinates and lengths in absolute units:
Width and height of the document are given as 10cm.
Sizes of objects within the document
are given in absolute units: cm, mm, in, pc, pt.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only cm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | discrete animation |
| Adobe | fail | discrete animation |
| Squiggle 1.7 | fail | wrong size (not 10cm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| 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 size (not 10cm) |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-02-01: §M(1)P
coordinates and lengths in em and ex:
The units em and ex are tested with animated circles compared to local and px units.
The unit em is set here with font-size to be 10 local units and ex is set within a
font element to be the half of em.
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only px as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | mixture of discrete and continous animation |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | completely wrong size |
| 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 | ok | - |
| Opera12,00 | fail | one circle wrong sized |
| Gecko 2.0 | fail | wrong size, wrong final value |
| Gecko 8.0/ 12.0/ 48.0 | fail | wrong size |
| Gecko 24.0/ 36.0/ 60.0 | ok | - |
e2010-07-02-02: §M(1)P
coordinates and lengths in em and ex:
The units em and ex are tested with animated circles compared with mm.
The units em is set here with font-size to be 10mm and ex is set within a
font element to be the half of em.
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only mm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | mixture of discrete and continous animation |
| Squiggle 1.7 | fail | wrong size (not 100mm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| Opera9tp2/beta1/2/ 9.00/9.10 | fail | wrong size (not 100mm) |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha | fail | wrong absolute and relative size |
| Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60 | fail | wrong size (not 100mm) |
| Opera12,00 | fail | one circle wrong sized |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-03-01: §M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated circles compared to local and px units.
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of
400 corresponds to 100% and a vertical length of 300 corresponds to 100%.
Other lengths in other directions are related to 353.5533905932737622... as 100%
(the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only px as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 animations |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| Opera9tp2 | ok | - |
| Opera9beta1 | fail | animation cancelled |
| Opera9beta2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | discrete and continuous animation mixed |
| Gecko 2.0 | fail | wrong final value |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-03-02: §M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated ellipses compared to local and px units.
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of
400 corresponds to 100% and a vertical length of 300 corresponds to 100%.
The attributes rx and ry as well as cx and cy are related to these lengths.
For the blue ellipse the values of the animation list is given in gray for comparison,
for the dark blue ellipse there is a red comparison below with an animation, using
only px as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 animations |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| Opera9tp2 | ok | - |
| Opera9beta1 | fail | animation cancelled |
| Opera9beta2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | discrete and continuous animation mixed |
| Gecko 2.0 | fail | wrong final value |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-03-03: §M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated circles compared to mm.
Because the size is set to a width of 200mm and a height of 150mm, a horizontal length of
200mm corresponds to 100% and a vertical length of 150mm corresponds to 100%.
Other lengths in other directions are related to 176.7766952966368811...mm as 100%.
(the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle the values of the animation list is given in gray for comparison,
for the dark blue circle there is a red comparison below with an animation, using
only mm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 animations |
| Squiggle 1.7 | fail | wrong size (not 200mm and 150mm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| Opera9tp2 | fail | wrong size (not 200mm and 150mm) |
| Opera9beta1 | fail | animation cancelled |
| Opera9beta2/ 9.00/9.10 | fail | wrong size (not 200mm and 150mm) |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | discrete and continuous animation mixed |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-03-04: §M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated ellipses compared to mm.
Because the size is set to a width of 200mm and a height of 150mm, a horizontal length of
200mm corresponds to 100% and a vertical length of 150mm corresponds to 100%.
The attributes rx and ry as well as cx and cy are related to these lengths.
For the blue ellipse the values of the animation list is given in gray for comparison,
for the dark blue ellipse there is a red comparison below with an animation, using
only mm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 animations |
| Squiggle 1.7 | fail | wrong size (not 200mm and 150mm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| Opera9tp2/ beta1/beta2/ 9.00/9.10 | fail | wrong size (not 200mm and 150mm) |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | discrete and continuous animation mixed |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-04-01: §M(1)P
coordinates and lengths in several units
(the same with GET-Parameters):
The size of the document is given in cm.
Sizes of objects within the document are given in absolute units: cm, mm, in, pc, pt.
Additionally values in px, em, ex and in percentage are given.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In this case 100% corresponds to 10cm.
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em.
The appearance of the px value depends on the resolution.
This results from an input either directly with GET parameters or with an XHTML-form.
If there are no parameters set within the URI, the XHTML-form is provided.
If the viewer does not interpret XHTML, the parameters have to be added directly as GET parameters:
px is for pixels
l is for the length
u is for the unit.
The default is ?px=900&l=230&u=mm
This is a typical resolution for notebooks.
Another typical parameter set: ?px=99&l=1&u=in
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occurred.
| 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 animations, typically wrong resolution (always 90dpi assumed?) |
| Squiggle 1.7 | fail | typically wrong resolution (always 96dpi assumed?) |
| Opera8.02/50 | fail | no animation, always 96dpi? |
| Opera9tp1 | fail | completely wrong size, wrong animation, always 96dpi? |
| 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, always 96dpi? |
| Gecko 2.0 | fail | wrong final value, wrong size, always 96dpi? |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size, always 96dpi? |
e2010-07-04-01: §M(1)P
units for rotate of animateMotion:
The rotate attribute of animateMotion can have angles as values, either as numbers as angle in degrees,
with the unit deg for degree, grad for grads and rad for radians.
This is tested with four blue squares with rounded corners.
For comparison there are four red squares below.
If something red gets visible, this indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no rotate |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no rotate |
| 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 | fail | wrong or no grad |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-05-01: §M(1)P
Additive animation with mixed absolute units:
For the blue circle there is a red comparison below with an animation, using
only cm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | test circle not displayed |
| Adobe | fail | test circle not displayed |
| Squiggle 1.7 | fail | wrong size (not 11cm) |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | completely wrong size |
| 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 size (not 11cm) |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size (not 11cm) |
e2010-07-05-02: §M(1)P
Additive animation with mixed units em, ex, mm, cm:
The units em is set here with font-size to be 10mm and ex is set within a
font element to be the half of em.
For the blue circle there is a red comparison below with an animation, using
only mm as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | test circle not displayed |
| Squiggle 1.7 | fail | wrong size (not 10cm) |
| Opera8.02/50/ 9tp1 | fail | completely wrong size |
| Opera9tp2 | fail | wrong size (not 10cm) |
| Opera9beta1 | fail | animation cancelled |
| Opera9beta2/ 9.00/9.10 | fail | wrong size (not 10cm) |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha | fail | wrong size |
| Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60 | fail | wrong size (not 10cm) |
| Opera 12,00 | fail | wrong sized circle |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong size |
e2010-07-05-03: §M(1)P
Additive animation with mixed units percentages, px and local units:
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of
400 corresponds to 100% and a vertical length of 300 corresponds to 100%.
Other lengths in other directions are related to 353.5533905932737622... as 100%
(the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle there is a red comparison below with an animation, using
only px as units, no mix of different units.
If something red gets visible, an error is occurred.
| 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 | test circle not displayed |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | completely wrong size |
| Opera9tp2/beta1/2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | not additive |
| Gecko 2.0 | fail | wrong final value |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-06-01: §M(1)P
Additive animations with units
(the same with GET-Parameters):
The size of the document is given in cm.
Sizes of objects within the document are given in absolute units: cm, mm, in, pc, pt.
Additionally values in px, em, ex and in percentage are given.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In this case 100% corresponds to 10cm.
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em.
The appearance of the px value depends on the resolution.
This results from an input either directly with GET parameters or with an XHTML-form.
If there are no parameters set within the URI, the XHTML-form is provided.
If the viewer does not interpret XHTML, the parameters have to be added directly as GET parameters:
px is for pixels
l is for the length
u is for the unit.
The default is ?px=900&l=230&u=mm
This is a typical resolution for notebooks.
Another typical parameter set: ?px=99&l=1&u=in
For the blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occurred.
| 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 | test circle not displayed, wrong animations, typically wrong resolution (always 90dpi assumed?) |
| Squiggle 1.7 | fail | typically wrong resolution (always 96dpi assumed?) |
| Opera8.02/50/ 9tp1 | fail | completely wrong size, wrong animation, always 96dpi? |
| 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, always 96dpi? |
| Gecko 2.0 | fail | wrong final value, wrong size |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | typically wrong resolution (always 96dpi assumed?) |
| user-agent | SVG 1.1 |
|---|---|
| user-agent | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/15 |
| KSVG1 | 0/15 |
| WebKit 528.16 | 0/15 |
| Adobe | 1/15 |
| Squiggle 1.7 | 5/15 |
| Opera8.02/50 | 1/15 |
| Opera9tp1 | 1/15 |
| Opera9tp2 | 6/15 |
| Opera9 beta1 | 3/15 |
| Opera9 beta2/ 9.00/9.10 | 5/15 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha | 2/15 |
| Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60 | 2/15 |
| Opera12,00 | 1/15 |
| Gecko 2.0 | 0/15 |
| Gecko 8.0/ 12.0/ 48.0 | 4/15 |
| Gecko 24.0/ 36.0/ 60.0 | 5/15 |
e2005-09-10-01: §M(2)P
to attribute:
After 3s the different cx values of circles are set
to the same value on the right with a to attribute.
Initial and final positions are marked with gray circles.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| 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 | - |
e2008-08-27-01: §M(1)P
discrete to animation:
width, stroke-linejoin and fill of a blue stroked rectangle are animated with a discrete to-animation.
width is enlarged at 2s for 5s with calcMode discrete explicitly set.
fill inherits the underlying value none from a parent g, therefore this is switched
discrete to blue at 8s for 5s.
A red stroked rectangle behind the blue one has set animations for width and stroke-linejoin
with the same timing.
A smaller circle has a set animation for fill with the same timing.
If something red gets visible or the fill of small circle and large rectangle are different, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong or no animation |
| WebKit 528.16 | fail | continuous animation |
| Adobe | fail | wrong timing |
| Squiggle 1.7 | fail | wrong timing |
| 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 | wrong timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-02: §M(1)P
to attribute:
A circle moves from left to right and back
to left and back to right, using three animations
with the to attribute and with a freeze fill.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | moves just once from left to right |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | does not move from right to left |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-03: §M(1)P
to attribute:
A circle moves three times from left to right
using three animations with the to attribute.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | vertical animation ignored |
| 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-17-01: §M(1)P
to attribute:
Test of the correct additive default behaviour of to animations
A circle moves on a quadratic path using two to animations for cx and
one simple for cy.
The path is given in gray for comparison.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive |
| 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-17-02: §M(1)P
frozen to animation:
Test of the correct additive default behaviour of to animations.
A circle moves on a quadratic path using two to animations for cx and
one simple for cy. The animation for cy and the first to animation for
cx is repeated two times, the second to animation for cx just 1.5 times.
Note that the second to animation is frozen on the
half way. Because it has higher priority, the whole animation in cx
is frozen.
For the second cx animation it is noted accumulate="sum". Because to
animations start always with the underlying value and end with the
to value, there cannot be a visible cumulative effect (This is explicitely
noted in SMIL2.0/2.1).
The path is given in gray for comparison, thin line for the first turn,
thick line for the second turn.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | fail | the second turn shows wrong behaviour for a frozen to animation |
| Adobe | fail | the second turn shows wrong behaviour for a frozen to animation |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive (reported to Opera as bug-185982) |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | not frozen like Adobe (reported to Opera as bug-185982) and second turn somehow cumulative |
| Gecko 2.0 | fail | minor accuracy problem for frozen value |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2007-03-11-01: §M(1)P
frozen to animation:
Test of the correct additive default behaviour of to animations.
A circle moves on a quadratic path using two to animations for cx and
one simple for cy. The animation for cy and the second to animation for
cx is repeated two times, the first to animation for cx just 1.5 times.
Note that the first to animation is frozen on the
half way. Because it has lower priority, the second cx animation survives
on a straight path.
For the cy animation it is noted accumulate="sum". Because to
animations start always with the underlying value and end with the
to value, there cannot be a visible cumulative effect (This is explicitely
noted in SMIL2.0/2.1).
The path is given in gray for comparison, thin line for the first turn,
thick line for the second turn.
If the red center of the circle becomes visible or the circle vanishes,
an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | fail | the second turn shows wrong behaviour for a frozen to animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive (reported to Opera as bug-185982) |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | second turn cumulative |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-01-01: §M(1)P
restarted to animation:
A circle moves from left to right and back
to left and so on, using two animations
with the to attribute and with a freeze fill and four begins.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
Because the two animations are not active at the same
time, the frozen value of the previous animation is used
as the underlying value. Because the other animation is
already frozen before an animation is restarted, the
restart has no influence anymore on the frozen value
of the lower priority animation. The frozen state
conserves simply the frozen value.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | frozen value not conserved |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive (reported to Opera as bug-185982) |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | frozen value not conserved |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | frozen value not conserved |
e2008-03-02-01: §M(1)P
restarted to animation:
A circle moves from bottom to top with some breaks,
using two animations with the to attribute and with a
freeze fill and four begins.
These animations are superposed by a simple from to
animation from left to right. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
Because the two animations are not active at the same
time, the frozen value of the previous animation is used
as the underlying value. Because the other animation is
already frozen before an animation is restarted, the
restart has no influence anymore on the frozen value
of the lower priority animation. The frozen state
conserves simply the frozen value.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | frozen value not conserved |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive (reported to Opera as bug-185982) |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | frozen value not conserved |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2008-03-03-01: §M(1)P
restarted to animation:
A circle moves in the vertical direction, using two animations
with the to attribute and with a freeze fill and two begins.
These animations are superposed by a simple from to
animation from left to right. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
With the restart the priority of the animations is exchanged.
They are both active at the same time. If the animation
with the lower priority is restarted, it gets the higher priority and
is therefore not the underlying value for the other
animation anymore. This other animation is now
the underlying value of the higher priority animation.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | second animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | not additive (reported to Opera as bug-185982) |
| 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 | - |
e2006-06-06-30: §M(1)P
none-additive to-animation:
to-animation of the non-additive stroke-dasharray property of
a blue path.
The stroke-dasharray is animated in 10s from the underlying
property value 0,1000 to 1000,0. Because the pathlength is
set to 1000 too, this means a continuous painting of the path
from invisible to complete visible.
Just for comparison stroke-dasharray of a red path is animated
with values 0,1000;1000,0. This is covered always completely
with the blue path. If something red gets visible, an error is occurred.
none-additive to-animation (second example):
to-animation of the non-additive rotate attribute of the text element.
The text attribute rotate changes continuously from -30 to 30 in 4s for the '?'.
Initial and final positions are given in gray. If something red gets visible,
an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | First example without blue path, no animation, crashes; second example no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | First example no animation, second ok |
| Squiggle 1.7 | fail | First sample: discrete animation, wrong pathLength? Second sample: Wrong error message, no animation |
| Opera8.02/50 | fail | wrong display, no animation |
| Opera9tp1 | fail | minor problems at the beginning of the first example, wrong animation at the second |
| Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9.00/9.10 | fail | first example no display in 9.00, after 10s the red path gets visible; second example animation wrong |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | (ok) | minor accuracy problem for the stroke in the first example |
| Gecko 60.0 | ok | - |
e2006-06-30-01: §M(1)P
none-additive to-animation (third example):
The text attribute rotate changes for a blue '?'.
Initial and final positions are given with thin gray strokes.
The first SMIL animation recommendation was ambiguous about
to-animations of non-additive attributes, however this is clarified
in SMIL 2 and 3 in such a way, that to-animations do not depend on
the question, whether the attribute is additive or not.
Effectively it is only necessary that it is possible to interpolate
between values.
Another red '?' is animated with a simpler animation with the same
visible effect. The test case has to cover this always completely.
If something red gets visible, an error is occurred.
none-additive to-animation (fourth example):
to-animation of the non-additive d attribute of a blue path.
The gray path shows the trajectory of the circle like blue path.
The first SMIL animation recommendation was ambiguous about
to-animations of non-additive attributes, however this is clarified
in SMIL 2 and 3 in such a way, that to-animations do not depend on
the question, whether the attribute is additive or not.
Effectively it is only necessary that it is possible to interpolate
between values.
The gray path covers a smaller red circle like path with the
same animation. If the blue object does not follow the gray
path or something red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | discrete animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | Frist sample: wrong error message, no animation; second: wrong animation |
| Opera8.02/50 | fail | third example: wrong display, no animation; fourth example: no to-animation |
| Opera9tp1 | fail | third example: wrong animation; fourth example: ok |
| Opera9tp2/ beta1/2 | ok | - |
| Opera9.00/9.10 | fail | animation discrete, only final value visible |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/12 | 0/12 |
| KSVG1 | 1/12 | 1/12 |
| WebKit 528.16 | 5/12 | 5/12 |
| Adobe | 7/12 | 7/12 |
| Squiggle 1.7 | 2/12 | 2/12 |
| Opera8.02/50 | 2/12 | 2/12 |
| Opera9tp1 | 4/12 | 4/12 |
| Opera9tp2/ beta1/2 | 7/12 | 7/12 |
| Opera9.00/9.10 | 5/12 | 5/12 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/12 | 7/12 |
| Gecko 2.0 | 10/12 | 10/12 |
| Gecko 8.0/ 12.0/ 24.0 | 11/12 | 11/12 |
| Gecko 36.0/ 48.0/ 60.0 | 9/12 | 9/12 |
e2005-09-10-04: §M(1)P
by attribute:
A circle moves from left to right and back
to left and back to right, using three animations
with the attribute by.
Note, that by animations without any other attributes like from, to, values etc are
additive by default.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | not additive |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | not additive |
| Opera8.02/50 | fail | not additive |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-05: §M(1)P
by attribute:
A circle moves 8 times from left to right using
an repeated animation with the attribute by.
Note, that by animations are additive, but not accumulative by default.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-06: §M(1)P
from attribute:
A circle moves from left to right and back
to left and back to right, using three animations
with the attributes from and to.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | vertical animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-07: §M(1)P
from attribute:
A circle moves from left to right and back
to left and back to right, using three animations
with the attributes from and by.
These animations are superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray polyline.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | vertical animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-08: §M(2)P
values attribute:
A circle is set from left to right for 5s with
one value in the values attribute.
The initial position is marked with a dark gray circle and the final
position is marked with a light gray circle.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-09: §M(2)P
values attribute:
A small circle is rotated around a big circle with several
values.
Values are marked with gray circles with strokes
rising as time marks and radius falling as time marks.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-10-10: §UQ
values attribute:
Random examples for the Foucaults Pendulum.
PHP is just used for the random choice and the calculation of interpolation points. The output is
a random SVG tiny 1.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | rendering incomplete and residuals |
e2005-09-10-11: §UQ
values attribute:
Animations of a harmonic oscillator in three dimensions (random Lissajous-Figures).
PHP is just used for the random choice and the calculation of interpolation points. The output is
a random SVG tiny 1.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-10-12: §M(1)P
values attribute:
The cx of a circle is animated with the
values 100; 900; 900; 100 and a duration of 10s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-10-13: §Q
values attribute:
The colour of the big circle is animated with several
values #ff0;#0f0;#0ff;#00f;#f0f;#f88;#ff0.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | fail | no animateColor |
e2007-01-31-01: §M(1)P
values and override rules:
A circle is moved from left to right for 5s with
the values attribute. This overrides the additionally
given attributes from, to, by.
After 5s another animation is started for 5s
from top to bottom using from and to, this
overrides the additionally given by.
The path is given with gray lines.
If the red center of the circle becomes visible, an error is
is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong override rules |
| 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 | 0/7 |
| KSVG1 | 0/7 | 0/7 |
| WebKit 528.16 | 6/7 | 6/7 |
| Adobe | 7/7 | 7/7 |
| Squiggle 1.7 | 6/7 | 6/7 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/7 | 7/7 |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | 6/7 | 6/7 |
| Gecko 24.0 | 5/7 | 5/7 |
e2007-04-01-01: §M(1)P
calcMode linear:
The cx of a circle is animated with the
values 100; 500; 200; 900; 900; 500; 200; 700; 800; 100
and a duration of 30s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no values animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-33: §Q
calcMode attribute:
A small circle is rotated around a big circle with
several values.
The colour of the big circle is animated with several grayscale
values. For both the calcMode is linear. This means
the time for every value interval is the same - because
the given values have different differences, the
velocities are different.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-10-34: §Q
calcMode attribute:
A small circle is rotated around a big circle with
several values for rotation and rotation center
with the calcMode linear.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-10-32: §M(1)P
calcMode attribute:
The cx of a circle is animated discrete from left to right with
some values and a duration of 10s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no cx animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | fail | last value 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-09-10-36: §M(1)P
compare set and calcMode discrete:
values animate with calcMode discrete is compared with set animations.
A red circle is set in several steps each 3s
from left to right. A blue circle covers the
red circle and is animated with calcMode discrete resulting in
the same motion. Therefore the blue circle is always perfectly
centered onto the red circle, which is never visible.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no discrete animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | fail | wrong timing |
| 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-14-11: §M(1)P
compare set and calcMode discrete:
from-to, from-by and by animate with calcMode discrete is
compared with set animations.
A red circle is set in several steps each 4s
from left to right. A blue circle covers the
red circle and is animated with calcMode discrete resulting in
the same motion. Therefore the blue circle is always perfectly
centered onto the red circle, which is never visible.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no discrete animation |
| WebKit 528.16 | fail | no discrete animation |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong timing |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-38: §P
colors and calcMode discrete:
The color of a circle is animated with the
values yellow, green, cyan, blue, magenta, orange.
The calcMode is discrete, this results
in discrete animations step by step.
The stroke is animated with sets and with the
same colours. The visible effect is, that there is
no difference between fill and stroke.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation for fill |
| KSVG1 | fail | wrong animation for fill |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong timing |
| Opera9tp1 | fail | wrong timing |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-19-01: §M(1)P
calcMode paced:
cx and cy of a blue circle are animated using
calcMode paced.
For a precision comparison there is a simpler linear animation
for a red circle. If the animation of the
blue circle is correct, this red circle will not get visible.
If the red one is visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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/ tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-19-02: §M(1)PS
animateTransform, calcMode paced:
A paced translation with animateTransform is compared with
a simulation using the Euclidian distance to determine the
timing and an animateMotion. All animations are using values
indicated with a gray triangle and thin black squares. The
animated squares, blue for the test, red for the simulation, dark
red for the animateMotion, have to interpolate between the
three black squares. The blue testcase has to cover the red
comparisons completely. If something red gets visible, an
error is occurred. The SVG 1.1 specification describes another
behaviour in contradiction to the behaviour specified for
calcMode paced in SVG 1.1 and in SMIL. This behaviour does
not interpolate between the values and is therefore wrong.
It is simulated using a light red square.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | fits to calcMode paced |
| Adobe | ok | fits to calcMode paced |
| Squiggle 1.7 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera8.02/50/ 9tp1 | no animation or display | |
| Opera9tp2/ beta1/beta2/ 9.00/9.10 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | fits to calcMode paced |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | fits to calcMode paced |
e2007-01-19-03: §M(1)PS
animateTransform scale, calcMode paced:
A paced scaling with animateTransform for a blue rectangle
is compared with a simulation for a red rectangle
using the Euclidian distance to determine the
timing and an animateMotion of the corners of the rectangle as
orange circles. In light red the animation is simulated as defined
in SVG 1.1.
All animations are using values indicated with thin black rectangles. The
animated rectangles have to interpolate between the
three black rectangles. The blue testcase has to cover the red or orange
comparisons completely to get a paced and interpolated animation.
If something red or orange gets visible, an error is occurred compared with
the definition of the calcMode paced.
Note that the simulation for the behaviour specified in
SVG 1.1 does not fit with the meaning of the definition of calcMode paced
specified by SMIL and SVG 1.1.
The SVG 1.1 behaviour is a paced animation, but does not interpolate
between the values.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no or confused animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | fits to calcMode paced |
| Adobe | fail | wrong animation |
| Squiggle 1.7 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera8.02/50/ 9tp1 | fail | no or wrong animation or display |
| Opera9tp2/ beta1/beta2/ 9.00/9.10 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | fail | wrong animation |
| Opera11.00/11.60/ 12,00 | ok | fits to calcMode paced |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | fits to calcMode paced |
e2005-09-10-31: §M(1)P
calcMode paced attribute:
A small blue circle is rotated around a big circle with
several values.
The duration is 30s and
the calcMode is paced, this results
in a rotation with a constant angular velocity.
For a precision comparison there is a simple from to animation
for a small red circle. If the animation of the small
blue circle is correct, this red circle will not get visible.
If the red one is visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no or wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation, only fractional or no display |
| Opera8.02/50 | fail | no paced animation |
| Opera9tp1/2/ beta1 | fail | no paced animation, no display of paced animated circle |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-19-04: §M(2)PS
animateTransform rotate, calcMode paced:
A paced rotate with animateTransform for a square is tested:
Does the animation interpolate between the given
values of the attribute? Is it a paced animation between the
given values?
The red and blue testcases have to meet the given values indicated as
gray squares within the animation. If not all values are
met, an error is occurred.
In SVG 1.1 a method is mentioned to get a paced animation.
But this method does not interpolate between the given values, but
gives a paced animation. Because the value is compost of one
angle and two coordinates, I think, there is no notion of
distance consistent with the definition of calcMode paced,
because angle and coordinate have different units with a
completely different meaning.
Anyway if the animation is paced, the blue square will
cover always the red square.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | interpolates, but not paced |
| Adobe | fail | interpolates, but not paced |
| Squiggle 1.7 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera8.02/50/ 9tp1 | fail | no or wrong animation or display |
| Opera9tp2/ beta1/beta2/ 9.00/9.10 | fail | does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | fail | wrong animation |
| Opera11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-10-37: §P
animateColor calcMode paced:
The colour of a circle is animated with several
random values. The duration is 10s and
the calcMode is paced.
The colour of the stroke is animated with the
same values, but with keyTimes, resulting in the
same visual effect, therefore there is not visible
difference in the colours of fill and stroke.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | fill wrong colours |
| WebKit 528.16 | ok | - |
| Adobe | fail | fill not paced |
| Squiggle 1.7 | fail | fill not paced |
| Opera8.02/50 | fail | fill animation ignored |
| Opera9tp1/2/ beta1 | fail | fill no animation, just initial value |
| Opera9 beta2 | ok | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | sometimes wrong final value |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-10-35: §Q
calcMode attribute:
A small circle is rotated around a big circle with
several values.
The colour of the big circle is animated with several grayscale
values. For both the calcMode is spline but without keyTimes. This means
the time for every value interval is the same - because
the given values have different differences, the
velocities are different.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/14 | 0/14 |
| KSVG1 | 0/14 | 0/14 |
| WebKit 528.16 | 12/14 | 12/14 |
| Adobe | 10/14 | 10/14 |
| Squiggle 1.7 | 9/14 | 9/14 |
| Opera8.02/50 | 6/14 | 6/14 |
| Opera9tp1 | 5/14 | 5/14 |
| Opera9tp2/ beta1 | 8/14 | 8/14 |
| Opera9 beta2/ 9.00/9.10 | 10/14 | 10/14 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 11/14 | 11/14 |
| Opera11.00/11.60/ 12,00 | 13/14 | 13/14 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 13/14 | 13/14 |
e2005-09-11-01: §Q
keyTimes attribute:
Three circles move from left to right, two of them with
values and keyTimes with rising velocities. The red one
has equidistant values and not equidistant keyTimes,
for the blue one both are not equidistant.
Just for comparison the yellow circle shows
a motion with constant velocity.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-11-02: §Q
keyTimes attribute:
Three circles move with a discrete animation
from left to right, two of them getting faster with
values and keyTimes. The red one
has equidistant values and not equidistant keyTimes,
for the blue one both are not equidistant.
Just for comparison the yellow circle shows
a motion with constant steps.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-11-03: §UA
keyTimes attribute:
Animations of random double star systems with values and keyTimes.
Classical approximation of a motion with gravitational interaction.
PHP is just used for the random choice and the calculation of interpolation points. The output is
a random SVG tiny 1.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-11-04: §UA
keyTimes attribute:
Gravitational scattering with random particles.
Classical approximation of a motion with gravitational interaction.
PHP is just used for the random choice and the calculation of interpolation points. The output is
a random SVG tiny 1.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| 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-02-09-01: §M(1)P
keyTimes attribute and discrete animation:
The cx of a circle is animated discrete from left to right with
some values and keyTimes and a duration of 10s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no cx animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-09-02: §P
keyTimes attribute and discrete animateColor:
The colour of a circle is animated with the
values yellow, green, cyan, blue, magenta, orange.
The calcMode is discrete, this results
in discrete animations step by step with given keyTimes.
The stroke is animated with sets and with the
same colours. The visible effect is, that there is
no difference between fill and stroke.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation for fill |
| KSVG1 | fail | wrong or no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | minor accuracy problems |
| Opera8.02/50 | fail | wrong timing |
| 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 | fail | no animateColor |
e2006-02-09-03: §M(1)P
keyTimes attribute and linear animation:
The cx of a circle is animated linear from left to right with
some values and keyTimes and a duration of 10s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no cx 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 | 0/7 |
| KSVG1 | 0/7 | 0/7 |
| WebKit 528.16 | 5/7 | 5/7 |
| Adobe | 7/7 | 7/7 |
| Squiggle 1.7 | 6/7 | 6/7 |
| Opera8.02/50 | 6/7 | 6/7 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/7 | 7/7 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 6/7 | 6/7 |
e2005-09-11-05: §Q
keySplines attribute:
Four circles move from left to right within 30s,
all of them with calcMode spline, values, keyTimes and
keySplines. The same keySplines are used as in the
examples of the specification.
The yellow one is the default with konstant velocity or
no acceleration.
The red starts with small acceleration and ends with small
deceleration and has the fastest velocity at 15s.
The magenta starts with a big acceleration and ends with
a small acceleration and has the fastest velocity at 0s.
The blue starts with a very small acceleration and ends with
zero acceleration and has the fastest velocity later than 15s.
Just for orientation in space and time, a gray vertical line is
displayed after 15s centered.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | - |
e2005-09-11-06: §M(1)PU
keySplines attribute:
A motion with a constant force, for example in the gravitation-field
of the earth close above the surface (not in space and without friction)
can be simulated with spline calcMode, values, keyTimes and
keySplines exactly. The trajectory is a parabola, shown here independently
as a quadratic Bezier curve exactly to enable a precise test of the
spline animation of the blue circle with the red center. The red part is
exactly centered behind the gray path and not visible, if the animation is correct.
The animation is a superposition
of two independent motions - a horizontal motion with constant velocity and
a vertical motion with constant acceleration and an initial velocity unequal zero.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | The accuracy could be better. |
| 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 | The accuracy could be better. As mentioned in the SVG-tiny specification, deviation should be below 1px, but here it is clear above, but still good enough for many applications. |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | circle vanishes |
e2007-05-12-21: §M(1)PU
keySplines attribute:
The cy of a blue stroked circle is animated with six different values
animations using calcMode spline and keySplines.
The cx is animated linear with values animations to get
two dimensional trajectories.
The resulting trajectories are displayed within the active duration
as gray paths. These paths cover always completely the red fill
of the circle.
If the red center of the circle gets visible, an error is
occurred.
The timing of the cx animations is choosen in such
a way, that the keySplines correspond directly to a cubic
path as trajectory. The keySplines values have to be multiplied
only with the related values, to get the path data.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | Accuracy could be better, but is already better as with Opera. |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy of keySpline interpolation too bad, interpolation obviously only done with a view linear segments, not really cubic splines. The interpolation seems to be slightly better in 8 as in 9, but 8 has a visible jitter, 9 not. |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-11-07: §PU
keySplines attribute comparison with and without and
keySplines attribute comparison with without keySplines animation, but many interpolation points:
A harmonic oscillator is used for a comparison
between a linear animation with several values and a
spline animation with serveral values. Both can be an
approximation for the harmonic motion.
Yellow: without keySplines
Blue: with keySplines
Green rectangle: exact harmonic oscillation represented by a rotation
Available Parameters:
dur - Animation time in seconds
anz - interpolation points values with keySplines: from 0 to 2 anz
num - interpolation points values without keySplines: from 0 to 2 num
The first example shows the same number of interpolation points for the spline
and the linear animation. The agreement will be poor. The second example
uses much more interpolation points for the linear animation. In this case,
the animations with and without splines are almost the same.
Other examples are available with the noted parameters in the URI.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no or wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-11-08: §AI
keySplines tester:
Visualization of keySplines and continuous combination of two keySplines:
The tester suggests animation continuations with continuous velocity.
It is tested, if two segments of keySplines fit together. They are
shown as a graph. The origin of time is on the left, on the right
the end of animation, the minimal value is on the bottom, the maximal
value at the top.
The black curve represents the input keySplines, the red one is the
continuously differentiable continuations from the first to the second
part. Magenta is the continuously differentiable continuations from the
second part to the first part.
The blue button starts three animations corresponding to the curves.
The suggestions are retarded a short time.
Parameters can be changed for the PHP-script in the URI,
the notation corresponds to the SVG notation, example:
dur=30
values=0;-360;360
keyTime=.6 (this is just the middle keyTime, the first is 0 and the last is 1)
keySplines=.2,0,0.5,1;.1,0,0,1
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 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 | fail | no interactivity |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-18-12: §Q
keySplines attribute with from and to:
Four circles move from left to right within 30s,
all of them with calcMode spline, from/to/by and
keySplines. The same keySplines are used as in the
examples of the specification.
According to the SMIL animation recommendation the
correlating keyTimes can be calculated from the user
agent from the values.
The yellow one is the default with konstant velocity or
no acceleration.
The red starts with small acceleration and ends with small
deceleration and has the fastest velocity at 15s.
The magenta starts with a big acceleration and end with
a small acceleration and has the fastest velocity at 0s.
The blue starts with a very small acceleration and ends with
zero acceleration and has the fastest velocity later than 15s.
Just for orientation in space and time, a gray vertical line is
displayed after 15s centered.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | keyTimes and keySplines ignored, no animation for the blue circle |
| WebKit 528.16 | fail | keyTimes and keySplines ignored |
| Adobe | fail | keySplines ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation |
| Opera9tp1/2/ beta1 | fail | keySplines ignored |
| 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 | - |
e2006-08-13-11: §Q
animateColor and keySplines:
animateColor with keyTimes and keySplines for fill of the
background rectangle and a circle with a
duration of 20s and repetition. If something red gets
visible or if the stroke of the circle is not different from fill an error is occurred.
If the backround has always the same color as the stroke or the fill this
is an error too.
The complete animations are in the blue range.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | nice colourful errors ;o) |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 | 0/7 |
| KSVG1 | 0/7 | 0/7 |
| WebKit 528.16 | 5/7 | 5/7 |
| Adobe | 7/7 | 7/7 |
| Squiggle 1.7 | 7/7 | 7/7 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 6/7 | 6/7 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | 5/7 | 5/7 |
| Gecko 36.0/ 48.0/ 60.0 | 6/7 | 6/7 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/51 | 0/51 |
| KSVG1 | 1/51 | 1/51 |
| WebKit 528.16 | 37/51 | 37/51 |
| Adobe | 42/51 | 42/51 |
| Squiggle 1.7 | 33/51 | 33/51 |
| Opera8.02/50 | 30/51 | 30/51 |
| Opera9tp1 | 33/51 | 33/51 |
| Opera9tp2/ beta1 | 39/51 | 39/51 |
| Opera9 beta2 | 41/51 | 41/51 |
| Opera9.00/9.10 | 39/51 | 39/51 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 42/51 | 42/51 |
| Opera11.00/11.60 | 44/51 | 44/51 |
| Opera12,00 | 44/51 | 43/51 |
| Gecko 2.0 | 44/51 | 44/51 |
| Gecko 8.0/ 12.0/ 24.0 | 49/51 | 49/51 |
| Gecko 36.0/ 48.0/ 60.0 | 48/51 | 48/51 |
e2007-06-12-01: §M(1)P
additive and accumulative behaviour:
Compare from-to, from-by and by animate with values animate.
SMIL specifies, that from-to, from-by and by animations have to be the same
as the related values animation.
Additionally set animations can be replaced by values animations too.
The conversion is as follows:
from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"
set to="a" ... values="a" additive="replace" accumulate="none"
(by and from-by animations have only a meaning, if values can be added somehow.
'0' is used as a general symbol for the neutral element of addition for the related attribute,
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
related attribute, '0' is a predecessor of '1' in the related attribute space.)
The from-to, from-by and by animations applied to the attributes x, y, width, height
of blue rectangles are compared with the related values animations including additive and
cumulative hehaviour for underlying red rectangles. Additionally underlying dark red
rectangles simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue rectangles cover all red rectangles. Therefore if something
red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or no animation |
| KSVG1 | fail | wrong or no animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | from-by always cumulative |
| Squiggle 1.7 | fail | no animation, mysterious error messages due to values attributes containing a single value |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | wrong by animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong final values |
additive animation means, the animation is added to
the initial value. If more than one
animation is applied to an attribute, then the animation
is added, too.
In general additive means superposition of motions.
e2005-09-12-01: §M(1)P
additive rotation:
A small circle is rotated around a big circle with a constant
angular velocity with a duration of 60s and repetition.
After 15s a second animation is superposed with
with the additive attribute. This animation has several
values and its repeated duration is 120s.
Just for comparison a red circle has the same
motion, but realised with an additional nested and
animated group. If the red one gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no repetition, ignores additive 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 | - |
e2007-03-25-01: §M(1)P
additive rotation:
A small square is rotated along a big circle with a constant
angular velocity with a duration of 60s and repetition.
A second animation is superposed to rotate the square
around its own center in such a way, that the edges of
the square are always aligned horizontal respectively
vertical.
Just for comparison a red circle has the same
motion, but realised with an additional nested and
animated group.
If the something red gets visible, an error is occurred.
A light gray circle indicates the motion path of the center
of the square, the darker circles indicate ranges for
the corners respectively edges of the squares.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, wrong size for square |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | blue square not animated |
| Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-02: §M(1)P
additive attribute:
A small circle is rotated around with a constant
angular velocity around the center of the document
with a duration of 60s and repetition.
A second animation with scaling is superposed with
the additive attribute. This animation has several
values and its repeated duration is 120s.
With this method it is possible to apply several types of
transformations to the same transform attribute.
Just for comparison a red circle has the same
animations, but realised with an additional nested and
animated group.
If the something red gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no repetition, red compare not animated |
| 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 | - |
e2005-09-12-03: §M(1)P
additive discrete animation:
A circle jumps from left to right and back using two
additive discrete animations with durations of 8s and
a difference in the begin-times of 2s.
A linear move in y direction corresponding to the time
and a path is given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | animation not discrete |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong 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 | ok | - |
e2005-09-12-04: §M(1)P
additive discrete animation:
A circle jumps from left to center and back using one
additive discrete animation with a duration of 8s and
a begin list with 0s (light gray path) and 2s (gray path).
The gray animation overwrites the light gray one,
independent of the additive attribute.
A linear move in y direction corresponding to the time
and paths are given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | animation not discrete |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | ignores second begin list value |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-05: §M(1)P
additive animation:
A circle moves from left to right and back using one
additive animation with a duration of 6s and
a begin list with 0s (light gray) and 3s (gray).
The later gray animation overwrites the light gray one.
A linear move in y direction corresponding to the time
and a paths are given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | minor timing problem |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | ignores second begin list value |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-06: §M(1)P
additive animation:
A circle moves from left to right and back using two
additive animations with durations of 3s and
and 4s. The first one starts at 3s, the second one at
8s.
A linear move in y direction corresponding to the time
and a path is given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores second animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong 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 | ok | - |
e2006-05-13-11: §M(1)P
replaced animateTransform:
A blue circle is scaled from small to big in 5s
using animateTransform with from and to.
Because the animation is not additive, the
initial transformation is overwritten.
If the red circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animateTransform |
| 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/8 | 0/8 |
| KSVG1 | 0/8 | 0/8 |
| WebKit 528.16 | 5/8 | 5/8 |
| Adobe | 8/8 | 8/8 |
| Squiggle 1.7 | 6/8 | 6/8 |
| Opera8.02/50 | 5/8 | 5/8 |
| Opera9tp1 | 6/8 | 6/8 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 8/8 | 8/8 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 8/8 | 8/8 |
The accumulate attribute is always correlated with repeatDur or repeatCount, these repetitions become cumulative, if accumulate is used. Note that the SMIL recommendations contain examples deviating from the descriptions and formulars. In the SMIL Animation recommendation, referenced by SVG 1.1, it is not quite clear, if the formular is wrong and the described behaviour intended or vice versa. This is changed in SMIL2.0/2.1 - here it gets quite clear, that the formular is normative and the descriptions of the examples are wrong.
e2005-09-16-01: §M(1)P
accumulate attribute:
Two small circles are rotated around a big circle with a constant
angular velocity with a duration of 5s for 45 degree.
This is repeated and the accumulate attribute is set to
sum.
The cyan one is a from to animation, the blue one a by animation.
The visible effect is in both cases a complete rotation in 40s
with indefinite repetition.
For comparson two red circles are rotated once in 40s, normally invisible
hidden behind the cyan and the blue one - if one of them gets visible,
an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no or wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | stops with funny error messages: 1>=1 |
| Opera8.02/50 | fail | no animation, bug-185986 |
| Opera9tp1 | fail | ignores attribute, no animation for the blue one, bug-185986 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-16-02: §M(1)P
accumulate animateTransform:
A small circle is rotated around with a constant
angular velocity with a duration of 20s and repetition,
using additive and accumulative animation.
A second by animationTransform with scaling is superposed.
It is cumulative too.
The visible effect is, that the circle spirals out of the center.
With this, a linear increase of the rotation radius and
the diameter of the animated circle is realised.
For other functional dependencies a finite spline animation
has to be used.
Gray circles give the position and diameter each 10s up to 60s.
If something red becomes visible, an error is occurred.
Positions and red comparison are calculated according to the
method described in SMIL2.0/2.1.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | fail | wrong final value for scale |
| Squiggle 1.7 | fail | stops with funny error messages: 1>=1 |
| Opera8.02/50 | fail | no animation, bug-185986 |
| Opera9tp1 | fail | ignores accumulate, bug-185986 |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | wrong animation, bug-185986 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-16-03: §M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform,
by, repeatDur and accumulate.
A linear move in y direction corresponding to the time
and a paths are given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | stops with funny error messages: 1>=1 |
| Opera8.02/50/ 9tp1 | fail | no animation, bug-185986 |
| Opera9tp2/ beta1/2 | fail | wrong animation, bug-185986 |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-16-04: §M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform,
from, by, repeatCount and accumulate.
A line as a path is given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no animation, bug-185986 |
| Opera9tp1 | fail | ignores accumulate, bug-185986 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-16-05: §M(1)P
accumulate discrete animation:
A circle jumps from left to right and back using one
additive and accumulative discrete animation with a
duration of 3s and a repeatCount of 2.
A linear move in y direction corresponding to the time
and a path is given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | animation not discrete |
| 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-02-12-01: §M(1)P
accumulate and animateTransform:
A circle is scaled with animateTranform with
from, by and accumulate in 20s.
If something red becomes visible, an error
occurred.
The tested behaviour is related to the formular given
in the SMIL animation recommendation, not to the
examples or their description. This shown behaviour
is the same as described by the SMIL2.0/2.1
recommendation in the normative formular.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateTransform |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | fail | wrong animation, behaviour as in the SMIL examples |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no animateTransform, bug-185986 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | accumulate ignored, bug-185986 |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-03-13-01: §M(1)P
accumulate and animateTransform:
A blue square is skewed with animateTransform with
values and accumulate in 20s. This is
compared with a skewed transform of a red squares
using values and keyTimes without accumulate to get
the same effect. Because both have the same timing,
the blue square will cover always the red one completely.
If something red becomes visible, an error is
occurred.
The tested behaviour is related to the formular given
in the SMIL animation recommendation, not to the
examples or their description. This shown behaviour
is the same as described by the SMIL2.0/2.1
recommendation in the normative formular.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateTransform |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no animateTransform, bug-185986 |
| Opera9tp1/ 9.50 alpha | fail | additive or accumulate problems |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-03-13-02: §M(1)P
accumulate and animateTransform:
Two blue squares are rotated with animateTransform with
values and accumulate in 20s. This is
compared with rotated transforms of two red squares
using values and keyTimes without accumulate to get
the same effect. Because all have the same timing,
the blue squares will cover always the red ones completely.
If something red becomes visible, an error is
occurred.
The tested behaviour is related to the formular given
in the SMIL animation recommendation, not to the
examples or their description. This shown behaviour
is the same as described by the SMIL2.0/2.1
recommendation in the normative formular.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateTransform |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no animateTransform, bug-185986 |
| Opera9tp1 | fail | accumulate problems |
| Opera9tp2/ beta1 | fail | already the start of animation confused, accumulate wrong |
| Opera9beta2/ 9.00/9.10 | fail | accumulate problems |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-07-01: §M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform,
from, to, repeatCount and accumulate.
A line as a path is given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation, bug-185986 |
| Opera9tp1 | fail | ignores accumulate, bug-185986 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-07-02: §M(1)P
accumulate attribute:
A circle is moved from left to right using cx and animate,
values, repeatCount and accumulate.
A linear move in y direction corresponding to the time
and a paths are given for comparison.
If the red center of the circle gets visible, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | animation not cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/10 | 0/10 |
| KSVG1 | 0/10 | 0/10 |
| WebKit 528.16 | 3/10 | 3/10 |
| Adobe | 8/10 | 8/10 |
| Squiggle 1.7 | 3/10 | 3/10 |
| Opera8.02/50/ 9tp1 | 2/10 | 2/10 |
| Opera9tp2/ beta1/2 | 6/10 | 6/10 |
| Opera9.00/9.10 | 8/10 | 8/10 |
| Opera9.50 alpha | 9/10 | 9/10 |
| Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 10/10 | 10/10 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 10/10 | 10/10 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/19 | 0/19 |
| KSVG1 | 0/19 | 0/19 |
| WebKit 528.16 | 8/19 | 8/19 |
| Adobe | 16/19 | 16/19 |
| Squiggle 1.7 | 9/19 | 9/19 |
| Opera8.02/50 | 7/19 | 7/19 |
| Opera9tp1 | 8/19 | 8/19 |
| Opera9tp2/ beta1/2 | 14/19 | 14/19 |
| Opera9.00/9.10 | 16/19 | 16/19 |
| Opera9.50 alpha | 18/19 | 18/19 |
| Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 19/19 | 19/19 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 18/19 | 18/19 |
