Samples for the use of the animate element is already given for many applications in the other sections. All data types can be animated with animate except frequency, time and transform-list. For the color data type typically the animateColor is preferred, but we can try it with animate, too. animateColor is restricted to color values, animate can use all paint values.
e2005-09-12-07: §Q
color animation with animate:
animate animation of the fill and stroke property.
The fill of several shapes in a group changes from yellow to blue
in 10 seconds. The stroke changes from light green to dark magenta.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | animation incomplete |
| 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 | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2005-09-12-08: §UQ
random animations of several attributes of a path or
random animations of several attributes of a path:
d, stroke-width, stroke-opacity, stroke and fill of a regular polygon path are animated
in a PHP-script for random generation of several parameters. A click on the path
restarts the PHP-script with another path.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Note, that very simple animate animation can work in KSVG, these are shown already in other examples.
Samples for the use of the set element are already given for many applications in the other sections. All data types can be animated with set except frequency, time and transform-list.
e2007-09-30-01: §M(1)P
compare set and animate:
set and animate with one value and additive replace and accumulate none are
equivalent. This is tested with animated circles.
Test duration is about 8s with three jumps in x direction.
Dark red or red indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | dur for set ignored? |
| WebKit 528.16 | fail | red animate comparison wrong |
| Adobe | ok | - |
| Squiggle 1.7 | fail | 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-12-09: §QI
set animation starts animate animations:
With a click on a circle the xlink:href attribute
of the a element around the circle is changed with
a set animation. The begin of this set animation
starts an animate animation, which one depends on
the changed content of the xlink:href attribute:
First click - horizontal movement.
Second click - vertical movement.
Third click - changes the size of the circle.
Note, that activation with hyperlinks resolves
begin times, therefore later activation gives
access to the history of the animation with the
latest resolved begin times for all elements.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | animates without interaction |
| WebKit 528.16 | fail | does not search back at fourth click |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong timing with repetition |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | no set of xlink:href |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | timing of history wrong |
| 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 | fail | no interactivity |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-10: §P
set a fill color with the URI fragment identifier #yellow:
set a fill color with the URI fragment identifier #blue:
set a fill color with the URI fragment identifier #green:
With an URI fragment identifier the color of a circle is set.
Available sets: #yellow, #blue, #green.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | always green |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | no animation |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0 | fail | no interactivity |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-11: §PI
set a fill color with a click on the
corresponding circle:
With a click on one of the small circles on the top
the color of a large circle is set.
Note, that a click on one small circle resolves the begin of the relating
set animation. The whole history is repeated after another click on the same
circle.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | always green |
| KSVG1 | fail | no interaction |
| WebKit 528.16 | fail | wrong colors after first turn |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | no history, sometimes not all clicks work |
| Gecko 2.0/ 8.0/ 12.0 | fail | no interactivity |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-12-12: §IQ
set and animate interactive combined:
The begin of the animation is started with
a click on the circle. Next clicks move a little bit further.
If the circle is clicked the last time before it moves
out of the viewBox, the complete cascade of moves is
repeated.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | not repeated |
| Adobe | fail | instable, some clicks ignored |
| Squiggle 1.7 | fail | underlying initial value ignored |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | xlink:href not animated, accumulate 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 | (in 9.50 alpha/beta/ 9.52 nasty residuals from the 'focus box') |
| Gecko 2.0/ 8.0/ 12.0 | fail | no interactivity |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2006-07-12-01: §IQA
set, begin and end with events:
Changing colour, opacity, display or visibilities
with different events as explained in the related
title element.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | ok | - |
| Adobe | fail | some events ignored, if they are applied to the end attribute |
| Squiggle 1.7 | fail | bottom left disappears forever, bottom right works only once |
| Opera8.02/50 | fail | most events ignored, crashes with some events applied to the end attribute |
| Opera9tp1 | fail | end events ignored in 9tp1, alle events ignored in betas |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | (ok) | (bottom right circle instable) |
| Opera11.60 | fail | bottom right no function |
| Opera12,00 | fail | some events ignored |
| Gecko 2.0/ 8.0 | fail | bottom right remains visible after click and move |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no interactivity |
| Gecko 60.0 | fail | bottom right remains visible after click and move, bottom left it remains invisible |
| 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 | 0/6 |
| KSVG1 | 0/5 | 0/6 |
| WebKit 528.16 | 0/5 | 1/6 |
| Adobe | 3/5 | 3/6 |
| Squiggle 1.7 | 1/5 | 1/6 |
| Opera8.02/50/ 9tp1 | 2/5 | 2/6 |
| Opera9 beta1/2 | 3/5 | 3/6 |
| Opera9tp2/ 9.00/9.10 | 3/5 | 4/6 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 4/5 | 5/6 |
| Opera11.60/ 12,00 | 4/5 | 4/6 |
| Gecko 2.0/ 8.0/ 12.0 | 1/5 | 1/6 |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | 5/5 | 5/6 |
Samples for the use of the animateTransform element are already given for many applications in the other sections, especially of the transform attribute. The data type transform-list can be animated with animateTransform.
e2006-02-11-02: §M(1)P
compare animate and animateTransform:
A circle moves from left to right with animateTransform.
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 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 | - |
This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2005-09-24-01: §Q
animateTransform of a SVG document:
animateTransform of an image element
referencing a SVG document.
A centered image is transformed with several
types additive and several durations.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | referenced SVG document animates, but no transformation. |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, no transformation |
| WebKit 528.16 | fail | almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was as a single document. |
| Adobe | fail | almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was as a single document. |
| Squiggle 1.7 | fail | almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was ok as a single document. |
| Opera8.02/50 | fail | no display |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | animation ok, but instead of the SVG a chequered pattern is displayed. |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | many disturbances in alpha, the SVG document does not animate. |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | SVG document does not animate. |
e2005-09-23-02: §Q
animateTransform switch back
and mirror:
A square and a test text are transformed with a matrix.
The transformation is reversed after 3s and vertically mirrored
within further 10s.
This means, after 3s the transformed square switches back
to a square and is mirrored after another 10s completely.
matrix itself is not animatable, but because
there is no additive-attribute it has to be simply overwritten.
| 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 | (ok) | sometimes frozen at zero scaling |
| 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 | (Text in tp2 a little bit instable) |
| Gecko 2.0/ 8.0/ 12.0 | fail | text animation disturbed |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-23-03: §Q
animateTransform
shrink to zero:
A square and a test text are transformed with a matrix.
After 3s an animateTransform with a scale from 1,1 by
-1,-0.5 is applied with additive sum.
This means, after 3s the square shrinks in x-direction
to zero and becomes invisible.
matrix itself is not animatable, but because of
additive sum it is the initial shape of the animation.
| 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 | text distorted, a residual of the text does not vanish |
| Adobe | fail | a residual of the shapes does not vanish |
| Squiggle 1.7 | fail | discrete and 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 | (Text in tp2 a little bit instable) |
| Gecko 2.0/ 8.0/ 12.0 | fail | text animation disturbed |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-14-03: §M(1)P
animateTransform and by:
A blue square and a test text are transformed with a matrix.
After 3s an animateTransform is added this with a scale
by 0.5,-2 and a duration of 10s and calcMode
linear is applied.
This means, after 3s the shape is scaled
and morphed from no display to a skewed rectangle.
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 | no animation |
| WebKit 528.16 | fail | frozen/crashed |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | no display or animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | in 9tp2 the text size is instable, ignores initial transformation. bug-212139 |
| 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 | fail | text animation disturbed |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-13-01: §M(1)P
by and animateTransform:
A blue circle is moved from right to left in 5s
using animateTransform with the by attribute.
Because for by the animation is additive, the
initial transformation is not overwritten.
If the red circle gets 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 animateTransform |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no display of the blue circle |
| Opera9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | not additive |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-23-01: §Q
animateTransform switch back
to no transform:
A square is transformed with a matrix. The transformation
is reversed by a discrete animation with a begin of 3s.
This means, after 3s the transformed square switches back
to a square. matrix itself is not animatable, but because
there is no additive-attribute it has to be simply overwritten.
| 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 | fail | no animation |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/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 | no animation |
| Gecko 2.0 | ok | - |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2005-09-23-04: §M(1)P
animateTransform
and to attribute:
A blue square and a test text are transfomed with a matrix.
After 3s an animateTransform with a scale to -1,1 and
a duration of 10s and calcMode linear is applied.
This means, after 3s the square morphes to a mirrored
square continuously.
matrix itself is not animatable, but it is the initial
value for the animateTransform.
If a something red becomes visible, an error 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 | wrong animation, sometimes frozen |
| Adobe | fail | not a linear animation |
| Squiggle 1.7 | fail | no animation, wrong error messages, wrong stroke-width! |
| Opera8.02/50 | fail | shapes vanish |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | not a linear animation. bug-212137 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2005-09-23-05: §M(1)P
animateTransform
and to attribute:
A blue square and a test text are given as initial shapes
with a scale of 1.5,1.5.
After 3s an animateTransform with a scale to -1,1 and
a duration of 10s and calcMode linear is applied.
This means, after 3s the scale is animated continuously
to mirrored shapes.
If a something red becomes visible, an error 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 | wrong animation |
| Adobe | fail | not a linear animation |
| Squiggle 1.7 | fail | wrong stroke-width! |
| Opera8.02/50 | fail | shapes vanish |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | not a linear animation. bug-212137 |
| 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 | fail | text animation disturbed |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-06-03-01: §M(1)P
animateTransform and frozen to animation:
Test of the correct additive default behaviour of to animations.
A circle moves on a quadratic path using two to animateTransforms in
x direction and one simple animate for cy.
The animation for cy and the first to animation for
x is repeated two time, the second to animation for x 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 x
is frozen.
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 | no animateTransform |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | first animateTransform ignored |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | the second turn shows wrong behaviour for a frozen to 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 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0 | ok | - |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2006-06-03-02: §M(1)P
animateTransform and to animation:
Two blue circles are moved to one position marked
with a gray circle, using animateTransform with to
for a translation to the absolute final value.
Two red circles are animated as simple references just
for comparison. If the red circles become visible,
the animation of the blue circles is wrong.
Note that to animations have a special additive
behaviour, defined in detail into the SMIL
recommendation.
| 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 | wrong animation |
| Adobe | fail | animation discrete, not linear |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | blue circles vanish |
| Opera9tp1 | fail | small circle incorrect animated |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | wrong 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 | ok | - |
e2007-06-11-11: §M(1)P
animateTransform,
keySplines:
Advanced test for calcMode splines, keySplines using from-to, from-by or values animateTransform.
A blue stroked circle is translated with six different
animateTransform using calcMode spline and keySplines.
A parent group is animated linear with values animateTransform
as a time axis to get to get a simple comparison.
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 animateTransform 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 and combined with the values of
the time axis, 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 | fail | keySplines ignored for from-to, from-by |
| Adobe | fail | keySplines ignored for from-to, from-by |
| Squiggle 1.7 | fail | from-by animation ignored, accuracy could be better for the others |
| Opera8.02/50 | fail | no keySpline animation |
| Opera9tp1/2/ beta1 | fail | keySplines ignored for from-to, from-by |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | bad interpolation |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | no blue circle |
SMIL specifies, that from-to, from-by and by animations have to be the same
as the related values animation.
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"
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.
Deviating from SMIL in SVG it is specified, that for animateTransform the animation
effect has to be postmultiplied to the underlying value, if the animation is additive.
For animateTransform
the '0' is the same as the zero matrix, not the unity or identity matrix.
For the translate type this is a translation given in coordinates: 0,0.
For the skewX or skewY type this is a skew with an angle of 0.
For two additive skew angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
For the scale type this is a scaling with 0,0, this means no display if not added to another
value.
For the rotate type this is a rotation with an angle of 0 around 0,0.
e2007-06-18-01: §M(1)P
animateTransform translate:
Compare from-to, from-by and by animateTransform translate with values
animateTransform and animateMotion.
The from-to, from-by and by are applied to animateTransform of the translate type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none with animateMotion. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | additive replace not ignored for by animations |
| 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 |
e2007-06-18-02: §M(1)P
animateTransform skewX:
Compare from-to, from-by and by animateTransform skewX with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the skewX type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | fail | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | additive replace not ignored for by animations |
| 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 intermediate and final values |
e2007-06-18-03: §M(1)P
animateTransform skewY:
Compare from-to, from-by and by animateTransform skewY with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the skewY type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | fail | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | additive replace not ignored for by animations |
| 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 intermediate and final values |
e2007-06-18-04: §M(1)P
animateTransform scale:
Compare from-to, from-by and by animateTransform scale with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the scale type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | fail | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong or no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | animation completely nonsense |
| 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 intermediate and final values |
e2007-06-18-05: §M(1)P
animateTransform rotate (around zero):
Compare from-to, from-by and by animateTransform rotate with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the rotate type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | fail | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | additive replace not ignored for by animations |
| 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 intermediate and final values |
e2007-06-18-06: §M(1)P
animateTransform rotate:
Compare from-to, from-by and by animateTransform rotate with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the rotate type
of different blue stroked
paths and are compared with the related values animations including additive and
cumulative behaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths.
Therefore if something red gets visible, the test is failed.
| 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 | fail | wrong animation |
| Adobe | fail | wrong interpretation for cumulative from-by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | additive replace not ignored for by animations and wrong cumulative animations |
| 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 intermediate and final values |
e2006-05-14-01: §M(2)P
animateTransform,
from, to, replace:
A blue square and a test text are transfomed with a matrix.
After 3s an animateTransform replaces this with a scale
from 1.5,1.5 to -1,1 and
a duration of 10s and calcMode linear is applied.
This means, at 3s the transformation is replaced, morphes then
to a mirrored square continuously.
Initial and final animation value of the rectangle are given in gray.
| 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 begin slightly too small |
| 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 | in 9tp2 the text size is instable |
| Gecko 2.0/ 8.0/ 12.0 | fail | text animation disturbed |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-14-02: §M(2)P
animateTransform,
from, to, additive sum:
A blue square and a test text are transfomed with a matrix.
After 3s an animateTransform is added this with a scale
from 1.2,1.2 to 1.5,-1.5 and a duration of 10s and calcMode
linear is applied.
This means, after 3s the shape is scaled in 3s from a factor of 1.2 to 1.5
and morphes to a mirrored square continuously.
Initial and final animation value of the rectangle are given in gray.
| 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 | 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 | in 9tp2 the text size is instable |
| 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/19 | 0/20 |
| KSVG1 | 0/19 | 0/20 |
| WebKit 528.16 | 5/19 | 5/20 |
| Adobe | 6/19 | 6/20 |
| Squiggle 1.7 | 7/19 | 7/20 |
| Opera8.02/50 | 6/19 | 6/20 |
| Opera9tp1 | 7/19 | 7/20 |
| Opera9tp2/beta1/2/ 9.00/9.10 | 6/19 | 6/20 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 15/19 | 15/20 |
| Gecko 2.0 | 6/19 | 7/20 |
| Gecko 8.0/ 12.0 | 5/19 | 6/20 |
| Gecko 24.0 | 8/19 | 9/20 |
| Gecko 36.0/ 48.0/ 60.0 | 9/19 | 10/20 |
KSVG does not like to animate the transform attribute in general. Amaya displays some corious effects or no animation.
Note, that is a little bit strange in the specification, that the matrix is not an
animatable type. Anyway it can be the initial value of the transform attribute,
any value of the transform attribute is the initial value of a to or by animation.
This is much more complicated for user agents than 'from to' or 'from by' animations.
To avoid problems, maybe it is better to prefer from to, from by or values, if possible.
Furthermore because matrix can be replaced by the other transformations, it is
possible to get the same visual effect of an animated matrix, combining the others with
the attribute additive sum.
To get the by-animations correct, an additive
animation from the identity matrix to the values given
by the by attribute has the same effect with
animateTransform, because this is defined as a
multiplicative operation and the by animation is additive.
To get the to-animation correct, a special rule has to be used.
If C(t) is the current transform matrix and T the to value of the
animation, t the time, d the duration, the user agent can use additive
replace and the following transform matrix for a to-animation:
C(t) + (T - C(t)) t/d.
Samples for the use of the animateColor element are already given for many applications in the other sections, see the subsections of the attributes fill, stroke and color. The data types color (and maybe paint) can be animated with animateColor.
e2005-09-15-01: §QU
animateColor:
Pseudorotation with discrete animation
of animateColor - a circle seems to rotate around
the center of the picture.
This animation is similar to the traditional
frame based animation as with formats like
GIF, MNG or MPEG. Instead of moving objects,
single pictures become visible just for a short time
and are displayed one after the other - here
it is done just for fun, in these formats this causes
the big file size, typical for this formats.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | nice colorful errors ;o) |
| 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 | - |
e2006-08-13-01: §P
animateColor:
The fill property of a circle is animated with the values
red;#ffff00;rgb(255,0,255);blue;rgb(0%,50%,70%);currentColor;red
with a begin of 2s and a dur of 10s with repetition. Initial value is none.
The stroke has the same animation, only using rgb() with percentage.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | nice colorful errors ;o) |
| WebKit 528.16 | fail | wrong currentColor |
| Adobe | fail | animation not continuous |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong currentColor |
| 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 | - |
e2006-08-13-02: §M(2)P
animateColor:
The color of a group and the fill of two circles part of the group are animated.
The values for color are rgb(0,0,255);rgb(100,100,100);rgb(0,0,255)
indicated by the color of the background.
The values for fill of the large centered circles are blue;currentColor;blue.
The values of the small circle bottom right are blue;rgb(100,100,100);blue,
but this animateColor uses keyTimes and keySplines to get the same visible
effect as the animateColor of the large circle.
Because currentColor changes all the time, the
animation of fill is a quadratic and continuous change
all in the blue range. An error occurred for example, if something red gets
visible, if fill is not animated continuously (ignoring the fact that
currentColor has always a RGB value) or if the effect of animation
of fill is not visible (ignoring the animation of color) or if the
animation of the two circles have not the same visible effect.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, wrong colors |
| WebKit 528.16 | fail | animation wrong |
| Adobe | fail | animation not continuous and wrong |
| Squiggle 1.7 | fail | animation wrong |
| 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 or no animation |
e2006-08-13-03: §Q
animateColor using system colors:
The fill property of a circle is animated with system colors as values:
WindowText;Menu;MenuText;InactiveBorder;
ActiveBorder;GrayText;Window;HighlightText;Highlight;
InfoBackground;InfoText;WindowFrame;WindowText
with a begin of 2s and a dur of 20s with repetition. Initial value is none.
The background rectangle is filled with AppWorkspace.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | nice colorful errors ;o) |
| WebKit 528.16 | fail | only diplayed color: black |
| Adobe | fail | only diplayed color: black |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | incomplete |
| 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 | - |
e2006-09-05-01: §M(1)P
animateColor, inherit and currentColor:
The color and the fill of a g element are animated from red to blue
respectively from blue to red in 10s.
The g element contains a rectangle for which the fill is animated
in 10s with the values inherit and currentColor.
The fill of the centered small circle simulates the behaviour of
the large rectangle, using keyTimes and keySplines to get the same visible
effect.
Because fill and currentColor change all the time, the
animation of fill of the rectangle is a quadratic and continuous change
all in the blue range (from blue to magenta back to blue).
An error occurred for example, if something red gets
visible, if something is not animated continuously (ignoring the fact that
currentColor and inherit have always a RGB value) or if the effect of animation
of fill is not visible (ignoring the animation of color) or if the
animation of rectangle and circle have not the same visible effect.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | surprising colorful errors ;o) |
| WebKit 528.16 | fail | no animation of rectangle |
| Adobe | fail | slightly wrong colors in the animation |
| Squiggle 1.7 | fail | animation completely wrong |
| Opera8.02/50 | fail | animation completely wrong |
| Opera9tp1/2 /beta1/2/ 9.00/9.10 | fail | wrong animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | wrong animation |
e2008-03-12-01: §P
animateColor and from-to animation:
The 16 case-insensitive color names of SVG tiny 1.1 are used in
from-to animateColor for the fill of 8 rectangles.
The animations are compared with the related animateColor for stroke
using hexadecimal numbers.
A difference between fill and stroke indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no stroke, test itself ok |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
e2008-03-12-11: §P
animateColor and from-by animation:
from by animateColor are tested using some of the
16 case-insensitive color names of SVG tiny 1.1.
The animations are compared with the related animateColor for stroke
using hexadecimal numbers.
A difference between fill and stroke indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no fill |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no fill |
| Opera9tp1/2/ beta1 | fail | wrong animation |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
e2008-03-12-12: §P
animateColor and from-by animation:
Clamping of color animations:
The presentation value has to be clamped to a proper value.
Some of the 16 case-insensitive color names of SVG tiny 1.1 are used in
from-by animateColor for the fill to test this.
The animations are compared with the related animateColor for stroke
using hexadecimal numbers.
A difference between fill and stroke indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no fill |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no fill |
| Opera9tp1/2/ beta1 | fail | wrong animation |
| 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 | wrong animation |
e2008-03-12-13: §P
animateColor and from-by animation:
SMIL specifies, that 'the values in the from/to/by and values
attributes may specify negative and out of gamut values for colors.
The function defined by an individual animateColor may yield negative
or out of gamut values. The implementation must correct the resulting
presentation value, to be legal for the destination (display) colorspace.'
This is possible especially for the percentage notation, because this is
defined to be numbers directly followed by '%' without further
restrictions. In these tests the presentation value is always in the legal
range, only the attribute values or individual animateColor interim results
may be outside of the legal range.
A difference between fill and stroke indicates an error.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no fill |
| KSVG1 | fail | wrong animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong or no animation of fill |
| Squiggle 1.7 | fail | wrong or no animation of fill |
| Opera8.02/50 | fail | no fill |
| Opera9tp1/2/ beta1 | fail | wrong animation |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | (different) wrong animation |
e2008-03-11-11: §P
animateColor and by animation:
The fill property of circles is animated from almost black to almost
white using 14 by animations of 7% steps corresponding to 17.85.
These additive animations are compared with a simple values animation for
stroke with the same initial and final value and the same timing for the large
circle.
If there is a difference between stroke and fill or the two circles, this indicates
an accuracy problem, because only the final presentation value might be rounded,
not each animation separately.
The background indicates the initial value and switches to the final value when
all animations are finished.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | wrong animation |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animateColor, funny colors |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animateColor, initial and final colors look ok |
| Squiggle 1.7 | fail | accuracy problems, initial and final colors look ok |
| Opera8.02/50/ 9tp1/2/ beta1 | fail | wrong or no animation |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy problem |
e2008-03-11-12: §P
animateColor and by animation:
The fill property of circles is animated from almost black to almost
white using 9 by animations of 10% steps corresponding 25.5.
These additive animations are compared with a simple values animation
for fill with the same initial and final value and the same timing for the
largest circle.
If there is a difference between the fill of the circles, this indicates
an accuracy problem, because only the final presentation value might be rounded,
not each animation separately.
The background indicates the initial value and switches to the final value when
all animations are finished.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | wrong animation |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animateColor funny colors |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animateColor |
| Squiggle 1.7 | fail | several 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 | fail | wrong or no animation, different nonsense |
e2006-06-04-01: §Q
animateColor and to animation:
Changes from blue to green in 4s, back to blue in another 4s and stopping after further 4s with green.
The changes are not linear.
Note, that color values outside the range 0 to 255 have not to be corrected within the animation calculation,
just the current value for presentation has to be corrected. Anyway, if the animation is correct, there is no
value outside the range 0 to 255.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateColor |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | wrong animation |
| 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 | fail | wrong or no animation |
e2008-03-12-21: §P
animateColor and calcMode linear:
The fill of three rectangles is animated with calcMode linear.
The animations are compared with related simpler animateColor for stroke
using only two values for each change.
A difference between fill and stroke indicates an error.
| 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 | 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 | - |
e2008-03-12-31: §P
animateColor and calcMode paced:
The fill of three rectangles is animated with calcMode paced.
The animations are compared with related simpler animateColor for stroke
using only two values for each change.
A difference between fill and stroke indicates an error.
| 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 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50 | fail | no fill |
| Opera9tp1/2/ beta1 | fail | wrong animation |
| Opera9beta2 | 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 | wrong frozen values |
e2008-03-11-01: §M(2)PS
discrete animateColor:
The fill property of the circle bottom right is discrete animated from
none to dark blue to none to light blue to blue to dark blue to none and so on,
begins with the set to dark blue with a begin 3s, the repeated duration is 10s.
The animateColor is compared with the same animation of stroke using animate.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor |
| WebKit 528.16 | fail | wrong animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | error message about wrong values, no animation |
| Opera8.02/50 | fail | no value none, black instead |
| Opera9tp1 | fail | wrong discrete animation, no blue |
| 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 | - |
e2008-03-11-02: §M(2)PS
animateColor and animate, detect calcMode discrete automatically:
The fill property of two circles is animated from
dark blue to light blue to blue to none to dark blue and so on with a begin 2s,
the repeated duration is 10s. Because it is not possible to interpolate between
a color value and none, the animation has to be detected as discrete
automatically.
The animate and animateColor are compared with the same animation of stroke using
explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor, no animate |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | mixture between discrete and continuous animation |
| Squiggle 1.7 | fail | error message about wrong values, no animation (for animate only: see comment for the adobe plugin) |
| Opera8.02/50 | fail | no value none, black instead, mixture between discrete and continuous animation |
| Opera9tp1 | fail | wrong timing and mixture between discrete and continuous animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | mixture between discrete and continuous 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 | fail | partly no value none, black instead, mixture between discrete and continuous animation |
This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2008-03-11-03: §M(2)PS
discrete animateColor:
The fill property of the circle bottom right is discrete animated from
none to gray to currentColor to a linear gradient to none
to gray and so on, begins with
the set to gray with a begin 3s, the repeated duration
is 10s. currentColor is defined by color, animated within 11.1s with the
values magenta, blue, green, yellow.
If something red gets visible, color is not animated.
The animateColor is compared with the same animation of stroke using animate.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor |
| WebKit 528.16 | fail | wrong animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | error message about wrong values, no animation |
| Opera8.02/50 | fail | no values, black instead |
| Opera9tp1 | fail | wrong discrete animation, no none at the end |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | currentColor not animated |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2008-03-11-04: §M(2)PS
animateColor and animate, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a
repeated duration of 14s with the values:
blue;#80f;blue;currentColor;url(#rG1) red;none;blue.
currentColor is defined by color, animated within 11.1s with the
values #80f; #00f; #0f8; #08f;#0ff;#80f.
#rG1 is a radial gradient.
If something red gets visible, color is not animated or the gradient is not supported.
Because it is not possible to interpolate between
a color value and none or a color and a gradient, the animation has to be detected
as discrete automatically.
The animate and animateColor are compared with the same animation of stroke using
explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | mixture between discrete and continuous animation |
| Squiggle 1.7 | fail | error message about wrong values, no animation (for animate only: see comment for the adobe plugin) |
| Opera8.02/50 | fail | no values none, black instead, mixture between discrete and continuous animation |
| Opera9tp1 | fail | no currentColor animation, wrong timing and mixture between discrete and continuous animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | currentColor not animated, mixture between discrete and continuous animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | mixture between discrete and continuous animation |
e2008-03-12-41: §P
animateColor and keyTimes:
The fill of three rectangles is animated with keyTimes.
The animations are compared with related simpler animateColor for stroke
using only two values for each change.
A difference between fill and stroke indicates an error.
| 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 | 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 | - |
e2008-03-12-42: §P
discrete animateColor and keyTimes:
The fill of three rectangles is animated discrete with keyTimes.
The animations are compared with related simpler animateColor for stroke
using only two values for each change.
A difference between fill and stroke indicates an error.
| 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 | no stroke animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong error messages due to single value |
| Opera8.02/50/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | fail | minor accuracy problem |
| Opera12,00 | ok | - |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | ok | - |
e2008-03-23-01: §M(2)PS
animateColor and animate with keyTimes, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a
repeated duration of 14s with the values:
blue;#80f;none;blue;currentColor;none;red with keyTimes
0;0.1;0.3;0.6;0.7;0.8;1
currentColor is defined by color, animated within 11.1s with the
values #80f; #00f; #0f8; #08f;#0ff;#80f.
If something red gets visible, color is not animated.
Because it is not possible to interpolate between
a color value and none, the animation has to be detected
as discrete automatically.
Note, that the values red is newer used, because the keyTimes value for
it is 1 and the animations are repeated.
The animate and animateColor are compared with the same animation of stroke using
explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | mixture between discrete and continuous animation |
| Squiggle 1.7 | fail | error message about wrong values, no animation (for animate only: see comment for the adobe plugin) |
| Opera8.02/50 | fail | no values none, mixture between discrete and continuous animation |
| Opera9tp1 | fail | no currentColor animation, wrong timing and mixture between discrete and continuous animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | currentColor not animated, mixture between discrete and continuous animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | mixture between discrete and continuous animation, black instead of none used |
e2008-03-23-02: §M(2)PS
animateColor and animate with keyTimes, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a
repeated duration of 14s with the values:
blue;#80f;none;blue;currentColor;none;#008 with keyTimes
0;0.05;0.1;0.3;0.6;0.8;0.9.
currentColor is defined by color, animated within 11.1s with the
values #80f;#00f;#0f8;#08f;#0ff;#80f.
If something red gets visible, color is not animated.
Because it is not possible to interpolate between
a color value and none, the animation has to be detected
as discrete automatically.
The animate and animateColor are compared with the same animation of stroke using
explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable
for <color> or for <paint> to as indicated in the table of animatable
attributes compared with the animateColor section. However, the animateColor
section does not exclude this explicitly.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | funny colors, wrong animateColor |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | mixture between discrete and continuous animation |
| Squiggle 1.7 | fail | error message about wrong values, no animation (for animate only: see comment for the adobe plugin) |
| Opera8.02/50 | fail | no values none, mixture between discrete and continuous animation |
| Opera9tp1 | fail | no currentColor animation, wrong timing and mixture between discrete and continuous animation |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | currentColor not animated, mixture between discrete and continuous animation |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | mixture between discrete and continuous animation, black instead of none used |
e2008-03-13-01: §P
animateColor and keySplines:
The fill of some rectangles is animated using keySplines and calcMode spline.
The active duration of the animateColor is ended at specific
times. The stroke shows the correct frozen color.
The large background rectangle shows the complete animation.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no animation, no stroke |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation, funny colors |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | one minor accuracy problem |
| Opera8.02/50 | ok | - |
| Opera9tp1/2/ 9beta2/ 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 problems |
| Opera9beta1 | fail | no animation |
e2008-03-13-02: §P
animateColor and keySplines:
The fill of some rectangles is animated using keySplines and calcMode spline.
The active duration of the animateColor is ended with repeatDur at specific
times. The stroke shows the correct frozen color.
The large background rectangle shows the complete animation.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no animation, no stroke |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | wrong animation, funny colors |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | fail | accuracy problems |
| Opera8.02/50 | ok | - |
| Opera9tp1/2/ 9beta2/ 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 problems |
| Opera9beta1 | fail | no animation |
e2007-06-16-01: §M(2)P
compare additive and cumulative
from-to, from-by and by with values animateColor:
SMIL specifies, how from-to, from-by and by animations have to be converted into
values animations. Therefore they 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. In the color space
0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each
of the three components of the color vector separately.)
The from-to, from-by and by animations applied to fill properties
of circles are compared with the related values animations including additive and
cumulative hehaviour for the stroke of the same circles. Additionally underlying
filled larger circles simulate the same behaviour using always the defaults additive replace and
accumulate none. The fill of the background circle and stroke and fill of the smaller
test circle centered in it are always exactly the same. Therefore if
rings in each centered circle system with different color get visible, the test is failed.
But each separated circle system representing one of 12 subtests can have another color.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | many errors |
| KSVG1 | fail | many errors |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong cumulative from-by and wrong by animations |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1/2 /beta1/ | fail | animation completely wrong |
| Opera9beta2/ 9.00/9.10 | fail | cumulative animations wrong |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
e2007-05-05-01: §P
additive animateColor:
The fill of some circles is animated using
additive animateColor.
All circles animate from magenta to cyan.
If the fill of one of the circles has a different
colour at any time than the others, an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | surprising colorful errors ;o) |
| KSVG1 | fail | surprising colorful errors ;o) |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | centered small circle wrong animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2 /beta1/ | fail | animation completely wrong |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
e2007-05-05-11: §P
accumulate animateColor:
The fill of some circles is animated using
cumulative animateColor.
All circles animate in the blue range.
The stroke of each circle has a simple animation with the
same visual effect.
If the fill of a circle is different from the stroke,
an error is occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | surprising colorful errors ;o) |
| KSVG1 | fail | surprising colorful errors ;o) |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | some animations wrong |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2 /beta1/ | fail | animation completely wrong |
| Opera9beta2/ 9.00/9.10 | fail | some animations wrong |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 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/25 | 0/27 |
| KSVG1 | 1/25 | 1/27 |
| WebKit 528.16 | 7/25 | 7/27 |
| Adobe | 11/25 | 12/27 |
| Squiggle 1.7 | 11/25 | 11/27 |
| Opera8.02/50 | 6/25 | 6/27 |
| Opera9tp1 | 5/25 | 5/27 |
| Opera9tp2/beta1 | 8/25 | 8/27 |
| Opera9beta2 | 12/25 | 12/27 |
| Opera9.00/9.10 | 11/25 | 11/27 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 12/25 | 13/27 |
| Opera11.00/11.60 | 11/25 | 12/27 |
| Opera12,00 | 12/25 | 13/27 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 * | 0/25 | 0/27 |
* animateColor completeley ignored.
e2005-09-14-01: §M(1)P
animateMotion with mpath element:
Two circles are moved along a cubic path with
a duration of 30s and repetition.
The path is given with the mpath element.
If the red center of the circle becomes visible, an error
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 | 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-14-02: §M(1)P
animateMotion with subpaths:
Two circles are moved along a path
consisting of the subpaths separated with
M commands.
The duration is 30s and the animation
is repeated.
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 animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | - |
| Opera9tp1 | fail | M spaces are animated too, but the should not take time |
| 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-14-03: §M(1)P
animateMotion with animated cubic path:
Two circles are moved along an animated cubic path with
a duration of 30s and repetition.
The animation of the path has a duration of 37s.
The initial path is dark bluegray, the final path is light bluegray,
the animated path is gray.
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 animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | path not animated |
| Opera8.02/50 | fail | path not animated |
| Opera9tp1 | fail | animated path wrong and 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 | fail | path not animated |
e2007-04-06-01: §M(1)P
animateMotion with animated cubic path:
A blue rectangle and a red circle are moved along a
light blue path with a duration of 20s and 3 repetitions.
The path itself is changed with each repetition.
This results in a motion along the gray path. The rectangle
is aligned along both paths.
The circle is always covered by the path given in gray.
The rectangle covers always a red rectangle with the
same motion gained with three animateMotion
using path attributes.
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 | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | path not animated, blue circle too large |
| Opera8.02/50 | fail | path not animated |
| Opera9tp1 | fail | wrong timing for path animation, does not follow animated path |
| 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 | fail | path not animated |
e2005-09-14-04: §M(1)P
animateMotion with animated quadratic path:
Two circles are moved along an animated quadratic path with
a duration of 30s and repetition.
The animation of the path has a duration of 37s.
The initial path is dark bluegray, the final path is light bluegray,
the animated path is gray.
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 animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | path not animated |
| Opera8.02/50 | fail | wrong animated path and motion does not follow the animated path |
| Opera9tp1 | fail | motion does not follow the animated path |
| 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 | fail | path not animated |
e2007-04-04-01: §M(1)P
animateMotion with animated linear path:
A blue rectangle and a red circle are moved along a
light blue path with a duration of 30s. The path itself is animated.
This results in a motion along the gray path. The rectangle
is aligned along both paths.
The circle is always covered by the path 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 | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | path not animated, blue circle too large |
| Opera8.02/50/ 9tp1 | fail | motion does not follow the animated path |
| 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 | fail | path not animated |
e2007-04-05-01: §M(1)P
animateMotion with animated linear path:
A blue rectangle and a red circle are moved along a
light blue path with a duration of 30s. The path itself is animated.
This results in a motion along the gray path. The rectangle
is aligned along the thin light blue path, not along the thick gray path!
The circle is always covered by the path 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 | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | minor accuracy problems |
| Squiggle 1.7 | fail | path not animated, blue circle too large |
| Opera8.02/50/ 9tp1 | fail | motion does not follow the animated path |
| 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 | fail | path not animated |
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-10-12-01: §M(1)PX
animateMotion with an external path:
Two circles are moved along a cubic path,
referenced from the file animatemotionmpath01.svg
with a duration of 30s and repetition.
The path is given with the mpath element.
If the red center of the circle becomes visible, an error
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 | no animation |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | attribute ignored |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing problem in the beginning with alpha |
| 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/8 |
| KSVG1 | 0/7 | 0/8 |
| WebKit 528.16 | 7/7 | 7/8 |
| Adobe | 6/7 | 6/8 |
| Squiggle 1.7 | 2/7 | 3/8 |
| Opera8.02/50 | 2/7 | 2/8 |
| Opera9tp1 | 1/7 | 1/8 |
| Opera9tp2/beta1/2/ 9.00/9.10 | 7/7 | 7/8 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/7 | 8/8 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 3/7 | 3/8 |
e2005-09-14-05: §M(1)P
animateMotion with path attribute:
Two circles are moved along a cubic path with
a duration of 30s and repetition.
The path is given with the path attribute.
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 | wrong 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-14-06: §M(1)P
animateMotion with values:
Two circles are moved along a square given with
values with a duration of 30s and repetition.
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 | wrong 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-14-07: §M(1)P
animateMotion with from to:
Two circles are moved from top left to bottom right
using from and to with a duration of 30s and repetition.
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 | wrong 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 | - |
e2006-06-03-03: §M(1)P
animateMotion and frozen to animation:
Test of the correct additive default behaviour of to animations.
A circle moves on a quadratic path using two to animateMotionss in
x direction and one simple animate for cy.
The animation for cy and the first to animation for
x is repeated two time, the second to animation for x 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 x
is frozen.
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 | first animateMotion ignored |
| WebKit 528.16 | fail | no animation in x direction |
| Adobe | fail | first animateMotion ignored |
| 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 | fail | first animateMotion ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | first animateMotion ignored |
e2006-06-03-04: §M(1)P
animateMotion and to:
Two blue circles are moved to one position marked
with a gray circle, using animateMotion with to
for a translation to the absolute final value.
Two red circles are animated as simple references just
for comparison. If the red circles become visible,
the animation of the blue circles is wrong.
Note that to animations have a special additive
behaviour, defined in detail into the SMIL
recommendation.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | animateMotion ignored |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | always additive sum |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9beta1 | fail | always additive replace |
| Opera9tp1/2/ 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 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2005-09-14-08: §M(1)P
animateMotion with by:
Two circles are moved from top left to bottom right
using by with a duration of 5s and a repeatCount
of 8.
The visible effect is a motion along the given gray path.
If something red becomes visible, an error
occurred.
If something dark red becomes visible, the behaviour for animateTransform is wrong too.
| 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 | fail | not additive |
| Adobe | ok | - |
| Squiggle 1.7 | fail | funny error messages 1 >=1 stops animation |
| Opera8.02/50 | fail | animation ok, only the control animation is wrong |
| Opera9tp1/2/ beta1 | fail | wrong animation, ignores accumulate |
| Opera9 beta2/ 9.00/9.10 | fail | animateTransform for comparison not additive |
| 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-14-09: §M(1)P
animateMotion with by:
Two circles are moved from left to right,
the dark blue one with animateMotion, the light blue
one with animateTransform. Both are
using the same values for
by, accumulate and repeatDur resulting in the
same animation.
If something red 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 animation |
| WebKit 528.16 | fail | not additive |
| Adobe | ok | - |
| Squiggle 1.7 | fail | funny error messages 1 >=1 stops animation |
| Opera8.02/50 | fail | animateTransform not animated |
| Opera9tp1/2/ beta1 | fail | animateTransform not animated and accumulate ignored or for tp2 and beta1 wrong animation |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-09-29-01: §M(1)P
animateMotion with by:
Test whether a by animateMotion is additive or not.
Red indicates an error.
| 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 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | not additive |
| Opera10.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-30-01: §M(1)P
animateMotion override rules:
A circle is moved along a simple path
indicated in gray.
The path is given with the mpath element.
Another path is given with the path element.
Additionally the attributes values, from, to and by
are given. The override rules specifies the mpath as
the path to follow. The others are ignored.
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 | wrong path |
| 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-01-30-02: §M(1)P
animateMotion override rules:
A circle is moved along a simple path
indicated in gray.
The path is given with the path attribute.
Additionally the attributes values, from to and by
are given. The override rules specifies the path attribute as
the path to follow. The others are ignored.
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 | wrong path |
| 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-01-30-03: §M(1)P
animateMotion override rules:
A circle is moved along a simple path
indicated in gray.
The path is given with the values attribute.
Additionally the attributes from to and by
are given. The override rules specifies the values attribute as
the path to follow. The others are ignored.
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 | wrong path |
| 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-01-30-04: §M(1)P
animateMotion override rules:
A circle is moved along a simple path
indicated in gray.
The path is given with the from and to attributes.
Additionally the attribute by is given.
The override rules specifies by to be ignored.
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 | wrong path |
| 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/4 | 0/4 |
| KSVG1 | 0/4 | 0/4 |
| WebKit 528.16 | 4/4 | 4/4 |
| Adobe | 4/4 | 4/4 |
| Squiggle 1.7 | 4/4 | 4/4 |
| 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 | 4/4 | 4/4 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 4/4 | 4/4 |
e2005-09-14-10: §M(1)Q
animateMotion with rotate auto:
Two circles are moved along a quadratic path with
a duration of 30s and repetition.
A closed path is given with the mpath element.
The rotate attribute is auto, this means for this
animation the circle group is rotated once for
one repetition. The small light blue circle is oriented
relative to the large blue circle in motion direction.
Normally the light blue circle is not exactly centered
below the path, but close to it.
| 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-14-11: §M(1)Q
animateMotion with rotate auto-reverse:
Two circles are moved along a quadratic path with
a duration of 30s and repetition.
A closed path is given with the mpath element.
The rotate attribute is auto-reverse, this means for this
animation the circle group is rotated once for
one repetition. The small light blue circle is oriented
relative to the large blue circle in opposite motion direction.
Normally the light blue circle is not exactly centered
below the path, but close to it.
| 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-14-12: §M(2)Q
animateMotion with rotate:
Two circles are moved along a quadratic path with
a duration of 30s and repetition.
A closed path is given with the mpath element.
The rotate attribute is 30, this has the same effect
as a rotation of the group with the same angle.
| 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 | - |
e2007-04-03-01: §M(1)P
animateMotion with rotate:
Two blue rectangles and a red circle are moved along a path with
a duration of 30s with rotate auto, then 30s with rotate auto-reverse,
then 30s with a fixed angle for rotate.
This means for this animation the rectangles are first aligned along the
path, then aligned in the reverse direction, then with a fixed angle.
The circle is always covered by the path given in gray.
Red rectangles animated with animateTransform
have the same motion as the blue and are always completely
covered by the blue rectangles.
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 | no animation |
| WebKit 528.16 | fail | rotate ignored in later animations |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong sized blue circle, wrong error messages stop animation at the end of the top path |
| Opera8.02/50 | fail | minor timing problems at the end of some path fragments |
| 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 | fail | wrong timing |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-27-01: §M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path, the larger part of the rectangle in
motion direction.
A red comparison together with the gray motion path is available.
This is realised with additional nested g elements and alternatively
with additive animation, in both cases one for each
transformation animation.
The red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | rotate ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | rotate ignored |
| 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 | - |
e2011-01-28-01: §M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element,
the animateMotion is a supplemental transformation matrix onto the CTM
of the animateTransform.
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the animateMotion
translation.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The circle is centered at the origin.
This group is additionally skewed with an animateTransform.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path, the larger part of the rectangle in
motion direction.
The motion path is given in gray for comparison.
A red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | rotate and animateTransform ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong order, rotate ignored, no animation of test |
| Adobe | fail | wrong order |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/tp2/beta1/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 order |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong order |
e2011-01-29-01: §M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element,
the animateMotion is a supplemental transformation matrix onto the CTM
of the animateTransform.
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the animateMotion
translation.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The group is skewed and mirrored at the y-axis with a transform of the scale type.
The circle is centered at the origin.
This group is additionally skewed with an animateTransform.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path, the larger part of the rectangle in
motion direction.
The motion path is given in gray for comparison.
A red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | rotate and animateTransform ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong order, rotate ignored |
| Adobe | fail | wrong order |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/tp2/beta1/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 order |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong order |
e2011-01-30-01: §M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the related
animateMotion translation. animateMotion can be additive, therefore
rotate is supplemental to each single animateMotion, not for the
complete motion.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path for each motion separately, therefore
the rectangle is typically not aligned along the superposition of the
additive motions.
A red comparison together with the gray motion path is available.
This is realised with additional nested g elements and alternatively
with additive animation, in both cases one for each
animation.
The red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | animateTransform ignored, animateMotion wrong |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong order |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong additive rotate |
| Opera8.02/50/ 9tp1/ 9beta1 | fail | wrong order |
| Opera9tp2/ 9beta2/ 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 | - |
e2011-01-31-01: §M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path, the larger part of the rectangle in
motion direction.
A red comparison together with the gray motion path is available.
This is realised with additional nested g elements and alternatively
with additive animation, in both cases one for each
transformation animation.
The red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | animateTransform ignored, animateMotion wrong |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | rotate ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong rotate |
| Opera8.02/50 | fail | no additive animateTransform |
| Opera9tp1/tp2 | fail | wrong order |
| Opera9beta1 | fail | no animateMotion |
| Opera9beta2/ 9.00/9.10 | fail | wrong additive, cumulative 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 | ok | - |
e2011-02-01-01: §M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element,
the animateMotion is a supplemental transformation matrix onto the CTM
of the animateTransform.
The rotation related to the animateMotion attribute rotate is
a supplemental transformation matrix onto the CTM and the animateMotion
translation.
What does it mean for the order the transformations are applied?
This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle.
The group is skewed and mirrored at the y-axis with a transform of the scale type.
The circle is centered at the origin.
This group is skewed after 5s with an animateTransform, replacing the initial skewing and mirroring.
The intended effect of the rotate attribute value 'auto' is here to
align the rectangle along the path, the larger part of the rectangle in
motion direction.
The motion path is given in gray for comparison.
A red comparison has to be completely covered,
therefore not visible, else an error has occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | rotate and animateTransform ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong order, rotate ignored |
| Adobe | fail | wrong order |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/tp2/beta1/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 order |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong order |
| 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 | 7/10 | 7/10 |
| Squiggle 1.7 | 7/10 | 7/10 |
| Opera8.02/50 | 4/10 | 4/10 |
| Opera9tp1 | 3/10 | 3/10 |
| Opera9tp2/ 9beta2/ 9.00/9.10 | 6/10 | 6/10 |
| Opera9beta1 | 5/10 | 5/10 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/10 | 7/10 |
| Gecko 2.0 | 6/10 | 6/10 |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 7/10 | 7/10 |
e2007-01-26-01: §M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform
for a rectangle.
animateTransform is blue and covers completely
the red animateMotion. Dark red uses the mpath element,
light red the path attribute and red values.
The path consists of a triangle indicated 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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| 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-01-26-02: §M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform
for a rectangle.
animateTransform is blue and covers completely
the red animateMotion. Dark red uses the mpath element,
light red the path attribute and red values.
The path consists of a triangle indicated in gray.
The paths are using explicitely the command Z to close
the path. In a linear animation the Z command consumes
time too, even if the length of the subpath is zero.
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 animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta2/ 9.00/9.10 | fail | wrong timing for paths including Z (of length zero for Opera8, for 9 if the length is not zero) |
| Opera9tp1/2/ beta1/ 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-28-01: §M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform
for a rectangle.
animateTransform is blue and covers completely
the red animateMotion. Dark red uses the mpath element,
light red the path attribute and red values.
The path consists of three simple lines as subpaths indicated in gray.
Except the initial M command the other M commands do not count
for the timing of the linear animation.
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 animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta2/ 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, different nonsense in 8, 9tp1 and 9tp2 and later |
| Gecko 2.0 | fail | wrong timing |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-26-03: §M(1)P
linear animateMotion:
Linear animateMotion with symmetric quadratic and
qubic paths are compared for two rectangles.
The blue linear animateMotion along one path is
compared with two red paced animateMotion for
each rectangle.
The blue animations cover completely the red animateMotion.
Due to symmetries there are additional things to compare,
because the velocity of one rectangle is exactly twice the
velocity of the other slower rectangle.
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 | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| 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 | - |
e2007-05-12-01: §M(1)P
linear animateMotion:
A linear animateMotion of a blue stroked square with a centered
circle is compared with four animateMotion of a red square
with a centered circle.
The motion of the red square is following the
combination of four animateMotion following on
each other and is the same as the motion of the blue
square, because the timing is choosen in such a way.
Therefore the blue square covers always the red one
completely.
The path is given in gray. The red fill of the circle
is always covered with the gray path.
Eight gray stroked markers are lightened, when the circle
is exactly above the marker. The red fill of the marker
is exactly covered by the blue stroked circle.
If something red gets visible, an error is occurred
and the animateMotion is not linear.
The exact timing is calculated using an analytical
integration of the path length of the sub paths
(this is available for quadratic or linear curves).
With this method the path position and the
time can be determined as functions of the usual
parametrisation of the used Bézier curves.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animateMotion |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | fail | minor accuracy problems |
| Squiggle 1.7 | (ok) | (accuracy could be slightly better) |
| Opera8.02/50 | fail | wrong timing (only first path fragment used) |
| Opera9tp1 | fail | wrong paths |
| 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 timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-12-12-01: §M(1)P
linear animateMotion:
A path with several path fragments of zero length is used for a
linear animateMotion of a blue square. The path is given in gray,
some simpler animateMotion elements are used to perform the same
motion for a red square exactly below the blue one.
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 | just one animateMotion for the red square |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | animation stops with wrong error messages with zero length path fragments |
| 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 | path fragments of zero length ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | path fragments of zero length ignored, wrong timing |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-04: §M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform
for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animateMotion |
| 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 | wrong timing (stop and go for beta2 and later) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-14-13: §M(1)P
animateMotion with calcMode discrete:
A circle is moved discrete along a cubic path with
a duration of 30s and repetition.
The path is given with the path attribute.
Gray marks show the control points as the
positions of discrete animation.
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 animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | minor position problems |
| 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-14-14: §M(1)P
compare set and calcMode discrete:
animateMotion with calcMode discrete is compared with set animations.
A red circle with a radius of 200 is set in several steps each 3s
from left to right. A blue circle with a radius of 200 covers the
red circle and is animated with calcMode discrete resulting in
the same motion. Therefore the blue circle covers always perfectly
and completely the red circle.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong 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 | - |
e2007-12-13-01: §M(1)P
calcMode discrete and path fragments of zero length:
A path with several path fragments of zero length is used for a
discrete animateMotion of a blue square. The path is given in gray,
some simpler animateMotion elements are used to perform the same
jumps for a red square exactly below the blue one.
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 animation |
| KSVG1 | fail | no discrete animation |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | fail | slightly wrong timing |
| 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 | fail | wrong timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong timing |
calcMode paced is the default behaviour for animateMotion, there are more tests for this in other subsections.
e2007-03-03-01: §M(1)P
paced animateMotion:
A paced animateMotion of a blue square with a centered
circle is compared with three animateMotion of a red square
with centered circle.
The motion of the red square is following the
combination of three animateMotion following on
each other is the same as the motion of the blue
square, because the timing is choosen in such a way.
Therefore the blue square covers always the red one
completely.
The path is given in gray. The background colors are switched
at some symmetry times, these are the time, when 50 percent
of a subpath is passed.
If something red gets visible, an error is occurred.
The timing is determined using the pathLength of
the top fragment of 800, the bottom of 1600 and
for the curved fragment an approximate value of
1809.55, leading to an accuracy of the comparison
of better than 0.1 units in the local coordinate system
corresponding to a timing accuracy better than 0.001s.
Note that the top and bottom path fragments are noted
as non trivial cubic beziers too, but looking like simple
lines or polylines.
The test is not sensitive to deviations for the motion
within the curved fragment, only for the complete path,
if the viewer estimate of the pathLength for a path
fragment is wrong for example.
| 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 | fail | minor timing problems in the top and bottom fragments |
| Squiggle 1.7 | (ok) | accuracy could be slightly better |
| Opera8.02/50 | fail | minor timing problems at the end of fragments |
| Opera9tp1 | fail | wrong paths |
| 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 | fail | wrong timing |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-05-07-01: §M(1)P
paced animateMotion:
A paced animateMotion of a blue stroked square with a centered
circle is compared with four animateMotion of a red square
with a centered circle.
The motion of the red square is following the
combination of four animateMotion following on
each other and is the same as the motion of the blue
square, because the timing is choosen in such a way.
Therefore the blue square covers always the red one
completely.
The path is given in gray. The red fill of the circle
is always covered with the gray path.
Eight gray stroked markers are lightened, when the circle
is exactly above the marker. The red fill of the marker
is exactly covered by the blue stroked circle.
If something red gets visible, an error is occurred
and the animateMotion is not paced.
The exact timing is calculated using an analytical
integration of the path length of the sub paths
(this is available for quadratic or linear curves).
With this method the path position and the
time can be determined as functions of the usual
parametrization of the used Bézier curves.
| 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 | last path fragment with zero length ignored |
| Adobe | fail | wrong timing due to last path fragment with zero length and minor further timing problems |
| Squiggle 1.7 | fail | wrong error messages at the end, last path fragment with zero length ignored |
| Opera8.02/50 | fail | minor timing problems at the end of fragments and with the last path fragment with zero length |
| Opera9tp1 | fail | wrong paths |
| 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 | last path fragment with zero length ignored |
| Gecko 2.0 | fail | wrong timing |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | last path fragment with zero length ignored |
e2007-12-14-01: §M(1)P
calcMode paced and path fragments of zero length:
A path with several path fragments of zero length is used for a
paced animateMotion of a blue square. The path is given in gray,
some simpler animateMotion elements are used to perform the same
motion for a red square exactly below the blue one. Because the
motion is paced, the zero length fragments are effectively ignored.
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 animation |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | ok | - |
| Adobe | fail | wrong timing |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | 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 | fail | wrong timing |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-05: §M(1)P
paced animateMotion:
Comparing paced animateMotion with animateTransform
for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | accuracy could be slightly better |
| Opera8.02/50 | fail | no animateTransform, wrong animateMotion |
| 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 | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-06: §M(1)P
spline animateMotion:
Comparing spline animateMotion with animateTransform
for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | (ok) | accuracy could be slightly better |
| Opera8.02/50 | fail | no animateMotion |
| 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 | wrong timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-26-07: §M(1)P
spline animateMotion:
Comparing spline animateMotion with animateTransform
for a rectangle.
animateTransform is blue and covers completely
the red animateMotion. Dark red uses the mpath element,
light red the path attribute and red values
The path consists of a triangle indicated in gray.
The paths are using explicitely the command Z to close
the path. In a linear animation the Z command consumes
time too, even if the length of the subpath is zero.
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 animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | calcMode ignored and some more confusions |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta2/ 9.00/9.10 | fail | wrong timing for paths including Z (of length zero for Opera8, for 9 if the length is not zero) |
| Opera9tp1/2/ beta1/ 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/13 | 0/16 |
| KSVG1 | 0/13 | 0/16 |
| WebKit 528.16 | 3/13 | 4/16 |
| Adobe | 8/13 | 11/16 |
| Squiggle 1.7 | 10/13 | 13/16 |
| Opera8.02/50 | 2/13 | 2/16 |
| Opera9tp1 | 6/13 | 6/16 |
| Opera9tp2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 8/13 | 9/16 |
| Opera9 beta2/ 9.00/9.10 | 6/13 | 7/16 |
| Gecko 2.0 | 7/13 | 10/16 |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 10/13 | 13/16 |
e2005-09-14-21: §M(2)P
animateMotion with calcMode linear and discrete and keyPoints:
Three circles are moved along a cubic path with
a duration of 30s and repetition.
The calcMode of the dark blue circle is paced for
comparison, the calcMode of the light blue circle is
linear, the calcMode of the small blue circle is discrete.
Light gray circles just show the control points of the
path, not relevant for the timing of the discrete or linear animation.
The linear and the discrete animations have keyPoints
from 0 to 1 in steps of 0.1.
For the discrete animation this means 10 equidistant
steps along the path, marked as dark gray gaps in the gray path.
Because the path is divided in
10 equidistant steps, the linear animation is almost
the same as paced, but not exactly.
It will join the paced animation
with each of the 10 steps again exactly.
e2006-09-11-01: §M(2)P
animateMotion with calcMode linear and discrete and keyPoints:
The same animation as before, using path attribute instead of mpath element.
e2006-02-11-10: §M(2)P
animateMotion with calcMode linear and discrete and keyPoints and pathLength:
The same animation as before, just with defined pathLength.
| 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 | fail | calcMode and KeyPoints ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | only the pathLength in the last sample ignored |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | attribute 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 | fail | only the pathLength in the last sample ignored |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-14-22: §M(1)P
animateMotion and
animateTransform with calcMode discrete and keyPoints:
A discrete animateMotion from left to right is superposed
by a discrete animateTransform from top to bottom.
keyPoints are given in steps of 10 percent.
The duration of the animations is 30s.
Gray points display the positions of the discrete
animations.
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 animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | attribute 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/ 60.0 | ok | - |
e2005-09-14-23: §M(1)P
animateMotion and
animateTransform with calcMode linear and keyPoints:
A linear animateMotion from left to right is superposed
by a linear animateTransform from top to bottom.
keyPoints are given with a quadratic curve.
The duration of the animations is 30s.
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 animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | confused animation |
| Opera9tp1/2/ beta1/ 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 | - |
| Opera9 beta2 | fail | short disturbances |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-14-24: §M(1)P
animateMotion and
animateTransform with calcMode linear and keyPoints:
A linear animateMotion from left to right is superposed
by a linear animateTransform from top to bottom.
keyPoints are given with a quadratic curve.
The duration of the animations is 30s.
The motion path is given with from and to.
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 | wrong or no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animateMotion |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | confused animation |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-14-25: §M(1)P
animateMotion
with values, calcMode discrete and keyPoints:
A discrete animateMotion 'House of Nikolaus'.
The motion path is given as a values list.
But the keyPoints list is twice as long as the
values list. They are marked with dark gray dashes.
This means, the points of discrete animation
are not only the edges of the house, they are mainly
between. Because the lines have different length but the
keyPoints are equidistant, they will not meet the values
in general.
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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong keyPoint positions |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | pathLength ignored (animation may be ok) |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | attribute 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 | fail | pathLength ignored (animation may be ok) |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-02-03-01: §M(1)PA
animateMotion used for positioning along a path:
A fraction of 0.5 of a path is marked with circles using
animateMotion and keyPoints.
Each circles is positioned using a slightly other
method, but always the blue stroked circle
has to cover the red ones. The red fill of the
blue stroked is covered with a gray mark
using stroke-dasharray and pathLength to
indicate the fraction of 0.5.
Because the path is mirror-symmetrical, the correct
position is indicated too with a background
divided in a white and a light gray half.
If something red becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animateMotion |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | several attributes ignored |
| Squiggle 1.7 | fail | curious error messages, no animation |
| Opera8.02/50 | fail | several attributes ignored |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | just one testcase almost ok |
| Opera9.50 alpha/beta/ 9.52 | fail | interpretation incomplete |
| Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0 | fail | pathLength ignored |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-03-02: §M(2)P
animateMotion with non monotonuous keyPoints list:
A non monotonuous keyPoints list is used to define
an oszillatory motion along a path.
The turning points of motion are marked in
gray on the gray path using stroke-dasharray and
pathLength. The center of the moved circle has to
meet these marks exactly as turning points of the motion.
Because path and keyPoints are mirror-symmetrical,
the markers are symmetrical too.
As an additional help the background is
divided in a white and a light gray half.
If something red becomes visible, an error is
occurred.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animateMotion |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | pathLength ignored (animation may be ok) |
| Adobe | fail | no animateMotion and pathLength |
| Squiggle 1.7 | fail | pathLength ignored (animation may be ok) |
| Opera8.02/50 | fail | confused |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | pathLength ignored (animation may be ok) |
| 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 | pathLength ignored (animation may be ok) |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-05-12-11: §M(2)P
discrete animateMotion with non monotonuous keyPoints list:
A discrete animateMotion with keyPoints of a blue stroked square with a centered
circle is compared with a values animateMotion of a red square
with a centered circle.
The motion of the red square is the same as the
motion of the blue
square, because the timing is choosen in such a way.
Therefore the blue square covers always the red one
completely.
The path is given in gray. The red fill of the circle
is always covered with the gray path.
Eight gray stroked markers are lightened, when the circle
is exactly above the marker. The red fill of the marker
is exactly covered by the blue stroked circle.
If something red gets visible, an error is occurred
and the animateMotion is wrong.
The exact timing is calculated using an analytical
integration of the path length of the sub paths
(this is available for quadratic or linear curves).
With this method the path position can be
determined as function of the usual
parametrisation of the used Bézier curves.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animateMotion |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | no animateMotion with keyPoints |
| Squiggle 1.7 | fail | wrong final value, minor accuracy problems with some points |
| Opera8.02/50 | fail | only first path fragment used, keyPoints ignored |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | keyPoints 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/ 60.0 | ok | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-01: §M(1)P
compare animateMotion and animateTransform:
Comparing linear animateMotion using keyPoints with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | no animation of test case |
| Adobe | fail | keyPoints ignored |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| Opera8.02/50 | fail | no animateMotion |
| 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 | wrong timing (stop and go for beta2 and later) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | no animateMotion |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-02: §M(1)P
compare animateMotion and animateTransform:
Comparing discrete animateMotion using keyPoints with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | no animation of test case |
| Adobe | fail | keyPoints ignored |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| Opera8.02/50 | fail | no animateMotion |
| 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 | keyPoints ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | no animateMotion |
| 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/10 |
| KSVG1 | 0/8 | 0/10 |
| WebKit 528.16 | 2/8 | 2/10 |
| Adobe | 0/8 | 0/10 |
| Squiggle 1.7 | 3/8 | 5/10 |
| Opera8.02/50 | 0/8 | 0/10 |
| Opera9tp1/2/ beta1/ 9.00/9.10 | 2/8 | 2/10 |
| Opera9 beta2 | 1/8 | 1/10 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 7/8 | 7/10 |
| Gecko 2.0 | 4/8 | 6/10 |
| Gecko 8.0/ 12.0/ 24.0 | 8/8 | 10/10 |
| Gecko 36.0/ 48.0/ 60.0 | 7/8 | 7/10 |
e2008-02-26-01: §M(1)P
animateMotion with keyTimes:
Some circles are moved along a square with
a duration of 30s.
All have the same timing, therefore the top
blue circles cover the other red ones.
The blue ones use a simple path referenced by
mpath or the same path using the path attribute
or values, all with keyTimes and calcMode linear.
The red circles below use values and either
keyTimes with animateTransform or a group separated
animateMotion resulting in the same timing for comparison.
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 | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| 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 | fail | wrong timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-02-27-01: §M(1)P
animateMotion with keyTimes:
Some circles are moved along a path with
a duration of 30s.
All have the same timing, therefore the top
blue circles cover the other red ones.
The blue ones use a simple path referenced by
mpath or the same path using the path attribute,
all with keyTimes and calcMode linear.
The red circles below use path and a group separated
animateMotion resulting in the same timing for comparison.
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 | no animation |
| WebKit 528.16 | fail | calcMode ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | confused with path with multiple M/m commands |
| 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 | fail | confused with path with multiple M/m commands |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-02-28-01: §M(1)P
animateMotion with keyTimes:
Some circles jump a few times along a path with
a duration of 30s.
All have the same timing, therefore the top
blue circles cover the other red ones.
The blue ones use a simple path referenced by
mpath or the same path using the path attribute
or a simple path given with values,
all with keyTimes and calcMode discrete.
The red circles below use path and a group separated
animateMotion resulting in the same timing for comparison.
If something red circles gets visible, an error is occurred.
Note, that control points and M/m commands except the
initial from the path do not contribute as jump points, therefore
there are exactly 5 jump points for each path.
| 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 | calcMode ignored |
| Adobe | fail | wrong timing |
| Squiggle 1.7 | fail | confused with path with multiple M/m commands |
| 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/ 60.0 | fail | confused with path with multiple M/m commands |
| Gecko 36.0/ 48.0 | ok | - |
e2005-09-14-31: §M(2)Q
animateMotion with keyPoints and keyTimes:
Three circles are moved along a cubic path with
a duration of 30s and repetition.
The blue and the light blue animations have keyPoints
from 0 to 1 in steps of 0.1.
For the discrete animation this means 10 equidistant
steps along the path, marked as dark gray gaps in the gray path.
The dark blue one has the calcMode linear,
the light blue one has keyPoints and keyTimes lists
and calcMode linear with the effect of enlarged velocities.
Additionally the blue is a discrete animation
with the same keyPoints and keyTimes.
| 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 | fail | two circles not animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | completely confused motions |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | keyPoints ignored for discrete 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 | ok | - |
e2005-09-14-32: §M(1)P
animateMotion with keyPoints and keyTimes:
A discrete animateMotion from left to right is superposed
by a discrete animateTransform from top to bottom.
keyPoints are given in steps of 10 percent corresponding to the given values.
keyTimes has values from a quadratic curve.
The duration of the animations is 30s.
Gray points display the positions of the discrete
animations.
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 | wrong or no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | attribute 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/ 60.0 | ok | - |
e2005-09-14-33: §M(1)Q
animateMotion with keyPoints and keyTimes:
A linear animateMotion from left to right is superposed
by a linear animateTransform from top to bottom.
keyPoints and keyTimes have the same values from a quadratic curve.
The duration of the animations is 30s.
If the red center of the circle becomes visible, an error
occurred. Note, that the velocity is enlarged with every
keyTime.
| 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 | fail | discrete animation |
| Adobe | fail | attribute ignored |
| 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-14-34: §M(1)P
compare animate with animateMotion with keyPoints and keyTimes:
A linear animateMotion from left to right is superposed
by a linear animate for cy (circle) from top to bottom.
animateMotion has several keyPoints and keyTimes.
The duration of the animations is 30s.
The visible effect is
a motion along the given gray path.
If the red center of the circle becomes visible, an error
occurred. Note, that the velocity is enlarged with every
keyTime.
| user-agent | result | comment |
|---|---|---|
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong or no animation |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | fail | discrete animation |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | confused |
| 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 | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-11: §M(1)P
compare animateMotion and animateTransform:
Comparing linear animateMotion using keyPoints and keyTimes with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | ok | - |
| Adobe | fail | no animateMotion |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| Opera8.02/50 | fail | no animateMotion |
| 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 | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-12: §M(1)P
compare animateMotion and animateTransform:
Comparing discrete animateMotion using keyPoints and keyTimes with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 last value |
| Adobe | fail | no animateMotion |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| Opera8.02/50 | fail | no animateMotion |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | keyPoints and KeyTimes ignored |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | frozen value wrong |
| 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/9 |
| KSVG1 | 0/7 | 0/9 |
| WebKit 528.16 | 1/7 | 2/9 |
| Adobe | 3/7 | 3/9 |
| Squiggle 1.7 | 5/7 | 7/9 |
| Opera8.02/50 | 1/7 | 1/9 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | 2/7 | 3/9 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 4/7 | 5/9 |
| Gecko 2.0 | 5/7 | 7/9 |
| Gecko 8.0/ 12.0/ 24.0/ 60.0 | 6/7 | 8/9 |
| Gecko 36.0/ 48.0 | 7/7 | 9/9 |
e2005-09-14-41: §Q
animateMotion with calcMode spline:
Three circles are moved along a cubic path with
a duration of 30s and repetition.
The path is given with the mpath element.
The magenta one has the calcMode paced for comparison,
the blue one has calcMode spline, keyPoints, keyTimes and
keySplines lists with the effect of deceleration to zero for
the half of the path and acceleration to the initial velocity
to the end.
The yellow circle has the calcMode linear for comparison.
The path has yellows gaps in the gray path as marks with
0.1 of the pathLength as difference between.
| 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 | calcMode linear ignored |
| Adobe | fail | two circles not animated |
| 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-14-42: §P
animateMotion with calcMode spline:
Three circles are moved along a cubic path with
a duration of 30s and repetition.
The path is given with the mpath element.
The magenta one has the calcMode paced,
the blue one has calcMode spline, keyPoints, keyTimes and
keySplines lists with the effect of deceleration to zero for
the first quarter of the path and time
and acceleration to the initial velocity to the end.
The yellow one has the calcMode spline, keyPoints, keyTimes
and keySplines lists with the effect of deceleration and
acceleration to the initial velocity to the end.
keyPoints are 0; 0.75; 1 and keyTimes are 0; 0.25; 1
This means deceleration in the first 6s to 75 percent
of the pathLength and then acceleration for the
remaining 24s to the end of the path.
The path has yellows gaps in the gray path as marks with
0.25 of the pathLength as difference between.
| 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 | fail | two circles not animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | completely confused motions |
| 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-14-43: §M(1)PU
animateMotion with calcMode spline:
This is the same animation as with animateTransform and keySplines in the keySplines subsection.
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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| 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) | accuracy could be better, test could be fail too... |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | circle vanished |
e2005-09-14-44: §M(1)PU
animateMotion with calcMode spline:
This is the same animation as above, but it will be just correct displayed, if keyPoints are not ignored in combination
with simple values.
| 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 | horizontal motion discrete |
| Adobe | fail | keyPoints ignored |
| Squiggle 1.7 | (ok) | see previous example |
| 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) | see previous example |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | circle vanished |
e2005-09-14-45: §M(1)PU
additive animateMotion with calcMode spline:
This is the same animation as above realized with additive animations.
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, from, to 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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | keySplines ignored |
| Squiggle 1.7 | (ok) | see previous example |
| Opera8.02/50/ 9tp1/2/ 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) | see previous example |
| Opera9 beta1 | fail | keySplines ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-06-11-01: §M(1)P
animateMotion with calcMode spline:
Advanced test for calcMode splines, keySplines using animateMotion.
A blue stroked circle is moved with seven different
animateMotion using calcMode spline and keySplines.
A parent group is animated linear with values animateMotion
as a time axis to get to get a simple comparison.
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 animateMotion 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 path data and combined with the values of
the time axis, to get the new 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 | fail | keySplines for several subtests ignored |
| Adobe | fail | keySplines ignored for from-to, wrong final value |
| Squiggle 1.7 | fail | wrong final value, minor accuracy problems |
| Opera8.02/50 | fail | minor interpolation problems and some jitter, nonsense with more than one M command, wrong final value |
| 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 | nasty interpolation problems, nonsense with more than one M command, wrong final value up to beta2 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-02-01: §M(1)P
compare animateMotion and animateTransform:
Comparing spline animateMotion using keyPoints with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 case not animated |
| Adobe | fail | keyPoints ignored |
| Squiggle 1.7 | (ok) | minor accuracy problems |
| Opera8.02/50 | fail | no animateMotion |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | keyPoints ignored |
| Opera9.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 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | no animateMotion |
This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-02-02: §M(1)P
compare animateMotion and animateTransform:
Comparing spline animateMotion using keyPoints and keyTimes with
animateTransform for a circle as a path for a rectangle.
animateTransform is red and covered completely
by the blue animateMotion.
The path consists of three parts respectively two
rotations of 90 degree and a final of 180 degree
back to the initial position.
The paths are indicated in gray.
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 | ok | - |
| Adobe | fail | no animateMotion |
| Squiggle 1.7 | fail | wrong final value |
| Opera8.02/50 | fail | confused or no animateMotion |
| 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 | - |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/6 | 0/8 |
| KSVG1 | 0/6 | 0/8 |
| WebKit 528.16 | 2/6 | 3/8 |
| Adobe | 1/6 | 1/8 |
| Squiggle 1.7 | 5/6 | 6/8 |
| Opera8.02/50 | 4/6 | 4/8 |
| Opera9tp1/2/ 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 | 5/6 | 6/8 |
| Opera9 beta1 | 4/6 | 5/8 |
| Gecko 2.0/ 8.0/ 12.0 | 6/6 | 8/8 |
| Gecko 24.0 | 4/6 | 6/8 |
| Gecko 36.0/ 48.0/ 60.0 | 6/6 | 7/8 |
e2007-06-13-01: §M(1)P
from-to, from-by and by animateMotion
compared with values animateMotion, additive or accumulate
:
Compare from-to, from-by and by animateMotion with values animateMotion.
SMIL specifies, how from-to, from-by and by animations have to be converted into
values animation. Therefore they have to be the same as the related values animation.
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"
(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. For animateMotion
the '0' is no motion or is related to a translation given in coordinates: 0,0.)
The from-to, from-by and by are applied to animateMotion of different blue stroked
paths and are compared with the related values animations including additive and
cumulative hehaviour for underlying red paths. Additionally underlying dark red
paths simulate the same behaviour using always the defaults additive replace and
accumulate none. The blue paths cover all red paths. Therefore if something
red gets visible, the test is failed.
| 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 | wrong animation |
| Adobe | fail | wrong from-by animation |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50 | fail | cumulative ignored, wrong by animation |
| Opera9tp1 | fail | no animation |
| Opera9tp2 | fail | wrong animation |
| Opera9beta1 | fail | no cumulative animation |
| Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong by animation |
| Opera10.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-05-06-01: §M(1)P
additive animateMotion:
A circles is moved along some paths
(two of them indicated in gray) with
a duration of 30s using additive animateMotion.
The superposition is no motion.
The circle is positioned always at the bottom right.
The colour of the circle switches from blue to gray after
the animation is finished.
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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | minor accuracy problems |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | minor accuracy problems |
| Opera9tp1/2/ 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 | - |
| Opera9 beta1 | fail | wrong animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-05-07-11: §M(1)P
accumulate animateMotion:
Circles are moved along squares given with the path attribute,
repeatDur and accumulate with a repeatDur of 30s and repetition.
Different values for the rotate attribute are given too, this has no visible effect,
because centered circles are moved.
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 animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | not cumulative |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong animation with 8 and 9tp1 accumulate ignored with 9tp2, no animtion with 9beta1, wrong final value with 9beta2. Some nonsense related to the rotate attribute since 9tp1. |
| 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 | - |
e2007-12-15-01: §M(1)P
frozen animateMotion:
The frozen value for animateMotion is tested for paths with last fragments with zero path length.
The last value of the active duration is used as frozen value. If the last value is
the last fragment with a path length of zero, this is choosen due to a specific rule in the
top three subtests. In the bottom test the active duration is cut short with repeatDur
without a specific rule, therefore the animation does not jump to one of the zero length
fragments.
The animateMotion moves blue squares, red squares with the same motion are covered
always completely. The paths 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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | wrong animation, wrong frozen values |
| Squiggle 1.7 | fail | stops animation with 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 | fail | wrong frozen values |
| Gecko 2.0 | fail | wrong animation, wrong frozen values |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen values |
e2007-12-15-02: §M(1)P
frozen linear animateMotion:
The frozen value for linear animateMotion is tested for paths with fragments with zero path length.
The last value of the active duration is used as frozen value. If the last value is
the fragment with a path length of zero, this is choosen.
The animateMotion moves blue squares, red squares with the same motion are covered
always completely. The paths 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 | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | wrong animation and frozen values |
| Squiggle 1.7 | fail | confused with the bottom samples; stops animation with 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 | fail | wrong animation and frozen values |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation, wrong frozen values |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
|---|---|---|
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/68 | 0/78 |
| KSVG1 | 0/68 | 0/78 |
| WebKit 528.16 | 27/68 | 30/78 |
| Adobe | 36/68 | 39/78 |
| Squiggle 1.7 | 42/68 | 51/78 |
| Opera8.02/50 | 20/68 | 20/78 |
| Opera9tp1 | 27/68 | 29/78 |
| Opera9tp2 | 38/68 | 41/78 |
| Opera9 beta1 | 35/68 | 38/78 |
| Opera9 beta2 /9.00/9.10 | 37/68 | 37/78 |
| Opera9.50 alpha/beta/ 9.52 | 49/68 | 53/78 |
| Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 51/68 | 55/78 |
| Gecko 2.0 | 44/68 | 53/78 |
| Gecko 8.0/ 12.0 | 53/68 | 62/78 |
| Gecko 24.0 | 51/68 | 60/78 |
| Gecko 36.0/ 48.0 | 53/68 | 59/78 |
| Gecko 60.0 | 52/68 | 58/78 |
