Animatable Attributes and Properties for SVG Painting
Painting: Filling, Stroking and Marker Symbols
fill properties
fill
e2005-08-27-01: §Q
set animation of the
fill property:
The color of several shapes in a group is set from light blue to dark blue
after 3 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | not all elements animated |
| Amaya11.3.1 | ok | - |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-27-02: §Q
animateColor animation of the
fill property:
The color of several shapes in a group change from light blue to dark blue
in 10 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | not all elements animated |
| Amaya11.3.1 | ok | - |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2005-08-27-07: §Q
set animation of the
fill property:
The fill property of the circle bottom right is set after 3s from
none to blue for 3s. Then it returns to none again.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | duration for set ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | circle gets black, not none after blue |
| 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-08-27-08: §Q
discrete animation of the
fill property:
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.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | random colors and no repetition |
| WebKit 528.16 | fail | wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | circle gets black instead of none after blue |
| Opera9tp1 | fail | ignores last value with calcMode discrete |
| 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-08-27-09: §Q
discrete animation of the
fill property:
The fill property of the circle bottom right is discrete animated from
none to gray to currentColor to gray 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, dark green, yellow.
If something red gets visible, color is not animated.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | random colors and no repetition |
| WebKit 528.16 | fail | wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | fail | color ignored |
| Opera8.02/50 | fail | circle gets black, not none |
| Opera9tp1 | fail | ignores last value with calcMode discrete |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | color not animated |
| 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 SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-10: §Q
discrete animation of the
fill property:
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, dark green, yellow.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | random colors and no repetition |
| WebKit 528.16 | fail | wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | fail | color ignored |
| Opera8.02/50 | fail | circle gets black, not none |
| Opera9tp1 | fail | ignores last value with calcMode discrete |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | color not animated |
| 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 | - |
e2010-07-09-01: §M(2)P
inherited animated fill:
The fill from a group is inherited for the two circles.
This fill is animated with a begin of 9.5s and a dur of 10s with some values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 10s with some values in the blue range.
The last value is inherit. This means, it interpolates to the current
inherited value. After the active duration the value inherit is frozen,
this means the fill value is the same as that of the small circle after
12s.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | ko | - |
e2010-07-09-02: §M(2)P
inherited animated fill:
The fill from a group is inherited for the two circles.
This fill is animated with a begin of 2s and a dur of 10s with three values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 10s with the values rgb(0,200,240);inherit and an end at 7s.
After the active duration the value of 50 percent rgb(0,200,240)
and 50 percent inherit is frozen.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with
simpler animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2 | fail | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | (minor timing problems) |
| Gecko 60.0 | ko | - |
e2010-07-10-01: §M(2)P
inherited animated fill:
Discrete animation of the fill property.
The fill from a group is inherited for the two circles.
This fill is animated with a begin of 2s and a dur of 12.5s with five values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 15s with the values inherit;rgb(0,200,240);inherit.
After the active duration the value is frozen.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2 | fail | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | (minor timing problems) |
e2010-07-11-01: §M(2)P
animated fill with currentColor:
The fill from a group is inherited for the two circles as currentColor.
This color is animated with a begin of 9.5s and a dur of 10s with some values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 10s with some values in the blue range.
The last value is currentColor. This means, it interpolates to the current
color value. After the active duration the value currentColor is frozen,
this means the fill value is the same as that of the small circle after
12s.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | (minor timing problems) |
| Gecko 60.0 | ko | - |
e2010-07-11-02: §M(2)P
animated fill with currentColor:
The fill from a group is inherited for the two circles as currentColor.
This color is animated with a begin of 2s and a dur of 10s with three values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 10s with the values rgb(0,200,240);currentColor and an end at 7s.
After the active duration the value of 50 percent rgb(0,200,240)
and 50 percent currentColor is frozen.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised with simpler animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | ko | - |
e2010-07-11-03: §M(2)P
animated fill with currentColor:
Discrete animation of the fill property.
The fill from a group is inherited for the two circles as currentColor.
This fill is animated with a begin of 2s and a dur of 12.5s with five values
in the blue range.
The small circle right below shows the current value of the group for comparison.
The large circle has its own animation of fill, beginning at 2s with a
dur of 15s with the values currentColor;rgb(0,200,240);currentColor.
After the active duration the value is frozen.
The small circle top left indicates the timing of the animation with
three values, black for currentColor, gray for the value in the middle.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised with simpler set animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | slightly wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50 | fail | black instead of currentColor |
| Opera9tp1/tp2/beta1/2/ 9.00/9.10 | fail | - |
| 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 | - |
e2010-07-11-04: §M(2)P
animated fill with currentColor and inherit:
The fill from a group is inherited for the three circles, one from fill, one from color
with currentColor.
The color is animated with a begin of 2s and a dur of 10s.
The small circles show the inherited value and the currentColor.
The large circle has its own animation of fill, beginning at 2s with a
dur of 10s with some values in the blue range.
The first value is inherit, the last value is currentColor.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised with a simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | (minor timing problems) |
e2010-07-15-01: §M(2)P
Additive animation of the fill property:
The fill from a group is inherited for a circle.
The circle has its own animation of fill.
After the active duration the value is frozen.
The stroke of the circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the fill and the stroke of the circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50 | fail | no animation |
| Opera9tp1/2/beta1 | fail | - |
| Opera9beta2/ 9.00/9.10 | fail | wrong frozen value |
| 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 | - |
Test results fill property
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 0/13 | 0/14 |
| Amaya11.3.1 | 2/13 | 2/14 |
| KSVG1 | 0/13 | 0/14 |
| WebKit 528.16 | 3/13 | 3/14 |
| Adobe | 7/13 | 8/14 |
| Squiggle 1.7 | 4/13 | 4/14 |
| Opera8.02/50 | 2/13 | 2/14 |
| Opera9tp1 | 3/13 | 3/13 |
| Opera9tp2/ beta1/2 | 4/13 | 4/14 |
| Opera9.00/9.10 | 8/13 | 8/14 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 11/13 | 12/14 |
| Opera11.00/11.60/ 12,00 | 8/13 | 9/14 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | 12/13 | 13/14 |
| Gecko 60.0 | 8/13 | 9/14 |
fill-rule
e2005-08-27-03: §M(1)P
set animation of the
fill-rule property:
The light blue figure will be covered by the dark blue square
completely after 3 seconds.
If something red becomes visible, an error is occured.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174913 |
| 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-08-27-04: §M(1)P
discrete animate animation of the
fill-rule property:
The light blue figure will be covered by the blue square
completely after 3 seconds and will be visible after
another 3 seconds and so on.
If something red becomes visible, an error is occured.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | confused animation |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174913 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-16-01: §M(1)P
Animation of fill-rule property and inheritance:
Discrete animate animation of the fill-rule property.
The light blue areas will be covered with dark blue
completely after 1.5 seconds and will be visible after
another 1.5 seconds and so on.
The right and the left rectangle change with the same timing,
but always with different fill-rule.
If something red becomes visible, an error is occured.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | - |
| Opera9tp2/beta1/beta2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha | (ok) | minor timing problems |
| Opera10.0 beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results fill-rule property
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/3 | 0/3 |
| KSVG1 | 1/3 | 1/3 |
| WebKit 528.16 | 1/3 | 1/3 |
| Adobe | 2/3 | 2/3 |
| Squiggle 1.7 | 3/3 | 3/3 |
| Opera8.02/50 | 0/3 | 0/3 |
| Opera9tp1 | 2/3 | 2/3 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 3/3 | 3/3 |
| Opera11.60/ 12,00 | 2/3 | 2/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 3/3 | 3/3 |
fill-opacity
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-05:
set animation of the
fill-opacity property:
Several shapes in a group change their fill-opacity from
0.8 to 0.4 after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-06: §Q
animate animation of the
fill-opacity property:
Several shapes in a group change their fill-opacity from
1 to 0 in 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-21: §Q
additivity of fill-opacity:
Several shapes in a group are referenced with a use element. This changes
its fill-opacity with additive animations on the left.
This is compared with a use on the right using simpler animations to get the
same effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | area of opacity incomplete, wrong animation |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | wrong or no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-22: §Q
additivity of fill-opacity:
Several shapes in a group are referenced with a use element. This changes
its fill-opacity with out of range values and fill-opacity with additive animations on the left.
This is compared with a use on the right using simpler animations to get the
same effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | area of opacity incomplete, wrong animation |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | wrong or no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | wrong animation |
| Gecko 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-01: §M(2)P
inherited animated fill-opacity:
Animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles.
This fill-opacity is animated with a begin of 9.5s and a dur of 10s with some values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill-opacity, beginning at 2s with a
dur of 10s with some values.
The last value is inherit. This means, it interpolates to the current
inherited value. After the active duration the value inherit is frozen,
this means the fill-opacity value is the same as that of the small circle after
12s.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-02: §M(2)P
inherited animated fill-opacity:
Animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles.
This fill-opacity is animated with a begin of 2s and a dur of 10s with three values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill-opacity, beginning at 2s with a
dur of 10s with the values 0.5;inherit and an end at 7s.
After the active duration the value of 50 percent 0.5
and 50 percent inherit is frozen.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with
simpler animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-03: §M(2)P
inherited animated fill-opacity:
Discrete animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles.
This fill-opacity is animated with a begin of 2s and a dur of 12.5s with five values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of fill-opacity, beginning at 2s with a
dur of 15s with the values inherit;0.5;inherit.
After the active duration the value is frozen.
The stroke of the large circle has the same appearance as the fill all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 60.0 | fail | minor timing problems |
| Gecko 24.0/ 36.0/ 48.0 | ok | - |
Test results fill-opacity property
| user-agent | SVG 1.1 |
| user-agent | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 |
| KSVG1 | 0/7 |
| WebKit 528.16 | 4/7 |
| Adobe | 4/7 |
| Squiggle 1.7 | 4/7 |
| Opera8.02/50/ 9tp1 | 3/7 |
| 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 | 4/7 |
| Gecko 2.0/ 8.0/ 12.0 | 5/7 |
| Gecko 24.0/ 36.0/ 48.0 | 6/7 |
| Gecko 60.0 | 4/7 |
Test results fill properties
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 0/16 | 0/24 |
| Amaya11.3.1 | 2/16 | 2/24 |
| KSVG1 | 1/16 | 1/24 |
| WebKit 528.16 | 4/16 | 8/24 |
| Adobe | 9/16 | 14/24 |
| Squiggle 1.7 | 7/16 | 11/24 |
| Opera8.02/50 | 2/16 | 4/24 |
| Opera9tp1 | 5/16 | 7/24 |
| Opera9tp2/ beta1/2 | 7/16 | 11/24 |
| Opera9.00/9.10 | 9/16 | 13/24 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 14/16 | 19/24 |
| Opera11.00 | 11/16 | 16/24 |
| Opera11.60/ 12,00 | 10/16 | 15/24 |
| Gecko 2.0/ 8.0/ 12.0 | 15/16 | 21/24 |
| Gecko 24.0/ 36.0/ 48.0 | 15/16 | 22/24 |
| Gecko 60.0 | 11/16 | 16/24 |
stroke properties
stroke
e2005-08-28-01: §Q
set animation of the
stroke property:
The stroke of several shapes in a group is set from light blue to blue
after 3 seconds and to dark blue after another 3 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | not all elements animated |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-02: §Q
animateColor animation of the
stroke property:
The stroke of several shapes in a group changes from magenta to blue to yellow
within 10 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2005-08-28-25: §Q
set animation of the
stroke property:
The stroke property of the circle bottom right is set after 3s from
none to blue for 3s. Then it returns to none again.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | duration for set ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | circle gets black, not blue after none |
| 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-08-28-26: §Q
discrete animation of the
stroke property:
The stroke property of the circle bottom right is discrete animated from
none to blue to none to blue and so on, begins with
the set to blue with a begin 3s, the repeated duration
is 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | random colors and no repetition |
| WebKit 528.16 | fail | wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | circle gets black, not blue after none |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-12-01: §M(2)P
inherited animated stroke:
The stroke from a group is inherited for the two circles.
This stroke is animated with a begin of 9.5s and a dur of 10s with some values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 10s with some values in the blue range.
The last value is inherit. This means, it interpolates to the current
inherited value. After the active duration the value inherit is frozen,
this means the stroke value is the same as that of the small circle after
12s.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no stroke |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-12-02: §M(2)P
inherited animated stroke:
The stroke from a group is inherited for the two circles.
This stroke is animated with a begin of 2s and a dur of 10s with three values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 10s with the values rgb(0,200,240);inherit and an end at 7s.
After the active duration the value of 50 percent rgb(0,200,240)
and 50 percent inherit is frozen.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with
simpler animations.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no stroke |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2 | fail | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-12-03: §M(2)P
inherited animated stroke:
Discrete animation of the stroke property.
The stroke from a group is inherited for the two circles.
This stroke is animated with a begin of 2s and a dur of 12.5s with five values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 15s with the values inherit;rgb(0,200,240);inherit.
After the active duration the value is frozen.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no stroke |
| Amaya11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2 | fail | - |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-13-01: §M(2)P
animated stroke with currentColor:
The stroke from a group is inherited for the two circles as currentColor.
This color is animated with a begin of 9.5s and a dur of 10s with some values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 10s with some values in the blue range.
The last value is currentColor. This means, it interpolates to the current
color value. After the active duration the value currentColor is frozen,
this means the stroke value is the same as that of the small circle after
12s.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-13-02: §M(2)P
animated stroke with currentColor:
The stroke from a group is inherited for the two circles as currentColor.
This color is animated with a begin of 2s and a dur of 10s with three values
in the blue range.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 10s with the values rgb(0,200,240);currentColor and an end at 7s.
After the active duration the value of 50 percent rgb(0,200,240)
and 50 percent currentColor is frozen.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised with simpler animations.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-13-03: §M(2)P
animated stroke with currentColor:
Discrete animation of the stroke property.
The stroke from a group is inherited for the two circles as currentColor.
This stroke is animated with a begin of 2s and a dur of 12.5s with five values
in the blue range.
The small circle right below shows the current value of the group for comparison.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 15s with the values currentColor;rgb(0,200,240);currentColor.
After the active duration the value is frozen.
The small circle top left indicates the timing of the animation with
three values, black for currentColor, gray for the value in the middle.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised with simpler set animations.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| 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 | slightly wrong timing |
| Adobe | ok | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50 | fail | black instead of currentColor |
| Opera9tp1/tp2/beta1/2/ 9.00/9.10 | fail | - |
| 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 | - |
e2010-07-13-04: §M(2)P
animated stroke with currentColor and inherit:
The stroke from a group is inherited for the three circles, one from stroke, one from color with currentColor.
The color is animated with a begin of 2s and a dur of 10s.
The small circles show the inherited value and the currentColor.
The large circle has its own animation of stroke, beginning at 2s with a
dur of 10s with some values in the blue range.
The first value is inherit, the last value is currentColor.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised with a simpler values list.
A difference between the stroke and the fill of the large circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | ok | - |
| Opera11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | (minor accuracy problems) |
e2010-07-18-01: §M(2)P
Additive animation of the stroke property:
The stroke from a group is inherited for a circle.
The circle has its own animation of stroke.
After the active duration the value is frozen.
The fill of the circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the stroke and the fill of the circle indicates
an error.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50 | fail | no animation |
| Opera9tp1/2/beta1 | fail | - |
| Opera9beta2/ 9.00/9.10 | fail | wrong frozen value |
| 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 | - |
Test results stroke property
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/12 | 0/12 |
| KSVG1 | 0/12 | 0/12 |
| WebKit 528.16 | 3/12 | 3/12 |
| Adobe | 6/12 | 6/12 |
| Squiggle 1.7 | 4/12 | 4/12 |
| Opera8.02/50 | 2/12 | 2/12 |
| Opera9tp1/tp2/ beta1/2 | 4/12 | 4/12 |
| Opera9.00/9.10 | 6/12 | 6/12 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 | 10/12 | 10/12 |
| Opera11.00/11.60/ 12,00 | 7/12 | 7/12 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | 11/12 | 11/12 |
| Gecko 60.0 | 7/12 | 7/12 |
stroke-width
e2005-08-28-03: §Q
set animation of the
stroke-width property:
The stroke-width of several shapes in a group is set from 2 to 20
after 3 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-04: §Q
animate animation of the
stroke-width property:
The stroke-width of several shapes in a group changes from 2 to 20
within 10 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-14-01: §M(1)P
inherited animated stroke-width:
The stroke-width from a group is inherited for circles.
This stroke-width is animated with a begin of 9.5s and a dur of 10s with some values.
The test circles have their own animation of stroke-width, beginning at 2s with a
dur of 10s with some values.
The last value is inherit. This means, it interpolates to the current
inherited value. After the active duration the value inherit is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all
the time.
If something red gets visible, an error is occured.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0 | fail | minor accuracy problems |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-14-02: §M(1)P
inherited animated stroke-width:
The stroke from a group is inherited for circles.
This stroke-width is animated with a begin of 2s and a dur of 10s with three values.
The test circle have their own animation of stroke-width, beginning at 2s with a
dur of 10s with the values 10;inherit and an end at 7s.
After the active duration the value of 50 percent of 10
and 50 percent inherit is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all
the time.
If something red gets visible, an error is occured.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | - |
| Opera9.00/9.10/ | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
e2010-07-14-03: §M(1)P
inherited animated stroke-width:
Discrete animation of the stroke-width property.
The stroke-width from a group is inherited for circles.
This stroke-width is animated with a begin of 2s and a dur of 12.5s with five values.
The test circles have their own animation of stroke-width, beginning at 2s with a dur of 15s with the values inherit;1;inherit.
After the active duration the value is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all
the time.
If something red gets visible, an error is occured.
Test results
| 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 | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| Opera8.02/50/ 9tp1/2/beta1/2 | fail | - |
| Opera9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-19-01: §M(1)P
Additive animation of the stroke-width property.:
The stroke-width from a group is inherited for circles.
The test circles have their own animation of stroke-width.
After the active duration the value is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all
the time.
If something red gets visible, an error is occured.
Test results
| 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 | - |
| Adobe | fail | - |
| 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 | fail | - |
| Gecko 2.0/ 60.0 | ok | - |
| Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | - |
Test results stroke-width property
| 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/6 |
| KSVG1 | 0/6 | 0/6 |
| WebKit 528.16 | 2/6 | 2/6 |
| Adobe | 2/6 | 2/6 |
| Squiggle 1.7 | 2/6 | 2/6 |
| Opera8.02/50/ 9tp1/tp2/ beta1/2 | 2/6 | 2/6 |
| Opera9.00/9.10 | 4/6 | 4/6 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 2/6 | 2/6 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | 5/6 | 5/6 |
| Gecko 60.0 | 4/6 | 4/6 |
stroke-linecap
e2005-08-28-05: §Q
simple set animation of the
stroke-linecap property:
The stroke-linecap of a line is set from butt to round
after 5 seconds for one line and from butt to square for another.
The gray parts should be covered completely by blue parts after this 5 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174718 |
| 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-08-28-06: §Q
set animation of the
stroke-linecap property:
The stroke-linecap of several shapes in a group is set from butt to square
after 3 seconds and then to round after another 3 seconds.
Note, that stroke-linecap applies just to shapes with open ends like line or polyline,
you have to look for details.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, works for single elements and not groups - see example above |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera as bug-174718 |
| 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-08-28-07: §Q
discrete animate animation of the
stroke-linecap property:
The stroke-linecap of several shapes in a group changes from butt to square to round
within 6 seconds.
Note, that stroke-linecap applies just to shapes with open ends like line or polyline,
you have to look for details.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174718 |
| 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 | - |
e2011-04-01-01: §M(1)P
stroke-linejoin and stroke-linecap round:
The widths of paths with stroke-linejoin and stroke-linecap round
are animated and compared with filled paths simulating the shape.
If something red gets visible, this indicates an error.
Test results
| 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 | - |
e2011-04-01-02: §M(1)P
stroke-linecap round:
The widths of paths with stroke-linecap round
are animated and compared with paths and circles simulating the shape.
If something red gets visible, this indicates an error.
Test results
| 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 | - |
Test results stroke-linecap property
| 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/5 |
| KSVG1 | 1/5 | 1/5 |
| WebKit 528.16 | 5/5 | 5/5 |
| Adobe | 5/5 | 5/5 |
| Squiggle 1.7 | 5/5 | 5/5 |
| Opera8.02/50 | 2/5 | 2/5 |
| Opera 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 | 5/5 | 5/5 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 5/5 | 5/5 |
stroke-linejoin
e2005-08-28-08: §Q
simple set animation of the
stroke-linejoin property:
The stroke-linejoin of a simple path is set from bevel to miter
after 5 seconds.
The gray parts should be covered completely by blue parts after this 5 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174719 |
| 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-08-28-09: §Q
set animation of the
stroke-linejoin property:
The stroke-linejoin of several shapes in a group is set from from bevel to round
after 3 seconds an then to miter after another 3 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, works for single elements and not groups - see example above |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174719 |
| 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-08-28-10: §Q
discrete animate animation of the
stroke-linejoin property:
The stroke-linejoin of several shapes in a group changes from bevel to round to miter in 6 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174719 |
| 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 | - |
e2011-04-02-01: §M(1)P
stroke-linejoin bevel:
Paths with stroke-linejoin bevel are animated and compared with filled
paths simulating the bevel shape.
If something red gets visible, the bevel is displayed wrong.
The bevel corners are given with the points, that would appear, if
there would be no linejoin, but two separated paths instead.
The two related points are simply connected.
The inner linejoin is always the intersection of the two strokes.
Test results
| 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 | - |
e2011-04-02-02: §M(1)P
stroke-linejoin bevel:
The widths of paths with stroke-linejoin bevel are animated and compared with filled
paths simulating the bevel shape.
If something red gets visible, the bevel is displayed wrong.
The bevel corners are given with the points, that would appear, if
there would be no linejoin, but two separated paths instead.
The two related points are simply connected.
The inner linejoin is always the intersection of the two strokes.
Test results
| 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) | (minor disturbances) |
| 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 | - |
Test results stroke-linejoin property
| 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/5 |
| KSVG1 | 1/5 | 1/5 |
| WebKit 528.16 | 5/5 | 5/5 |
| Adobe | 5/5 | 5/5 |
| Squiggle 1.7 | 5/5 | 5/5 |
| Opera8.02/50 | 2/5 | 2/5 |
| Opera 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 | 5/5 | 5/5 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 5/5 | 5/5 |
stroke-miterlimit
e2005-08-28-11: §Q
set animation of the
stroke-miterlimit property:
The stroke-miterlimit of a simple path is set from 1 to 10 after 5 seconds.
The gray parts should be covered completely by blue parts after this 5 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174720 |
| 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-08-28-12: §Q
animate animation of the stroke-miterlimit property:
The stroke-miterlimit of a group of simple paths changes from 1 to 60 within 5 seconds.
Because stroke-miterlimit is a number, it is given as a linear animation, not a discrete,
anyway the effect is a discrete switch according to the nature of this property.
The visible effect is, that the paths get spikes in the center, from top to bottom.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation of groups, but works for single elements |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no animation; Opera bug-174720 |
| 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 | - |
e2011-04-03-01: §M(1)P
stroke-miterlimit:
If the relative miter length of a corner would become longer than the value of the
stroke-miterlimit property, the stroke-linejoin turns effectively from
miter to bevel.
Two simple test paths are animated together with the stroke-miterlimit.
On top, the stroke-linejoin remains the default miter.
Below the stroke-miterlimit is always smaller than the relative miter length of
the corner, therefore the stroke-linejoin is effectively always bevel.
For both test paths there are comparison paths with a not animated stroke-miterlimit,
on top larger than the animated value of the test path, below it is set to 1, therefore
never larger than the animated value of the test path.
The resulting effect are two visible blue paths. If something red gets visible,
an error is occured.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no display |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | initially wrong, minor disturbances |
| Adobe | fail | top wrong |
| Squiggle 1.7 | fail | completely wrong |
| Opera8.02/50 | fail | completely wrong |
| Opera9tp1 | fail | bottom wrong |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0/ 10.60 | (ok) | (minor initial problems) |
| Opera10.0 alpha/beta/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | accuracy problems |
Test results stroke-miterlimit property
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/3 | 0/3 |
| KSVG1 | 1/3 | 1/3 |
| WebKit 528.16 | 2/3 | 2/3 |
| Adobe | 2/3 | 2/3 |
| Squiggle 1.7 | 2/3 | 2/3 |
| Opera8.02/50 | 0/3 | 0/3 |
| Opera 9tp1 | 2/3 | 2/3 |
| Opera 9tp2/ beta1/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 | 3/3 | 3/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 2/3 | 2/3 |
stroke-dasharray
e2005-08-28-13: §Q
set animation of the
stroke-dasharray property:
The stroke-dasharray of a rect is set from 10,90 to 50,50 after 5 seconds.
The gray parts should be covered completely by blue parts after this 5 seconds.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | element ignored |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | (ok) | minor problems with the corners with some window sizes |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| 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-08-28-14: §Q
animate animation of the stroke-dasharray property:
The stroke-dasharray of a rect changes from 10,90 to 50,50 within 10 seconds.
The gray parts should be covered completely by blue parts after this 10 seconds.
Because stroke-dasharray are numbers, it is given as a linear animation, not a discrete.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | element ignored |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | discrete animation, not linear |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1/2/ beta1/2/ 9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | painting problems in the edges, but animates correct. |
| Opera9.00 | fail | wrong stroke-dasharray. |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 48.0/ 60.0 | ok | - |
| Gecko 36.0 | fail | painting problems in the edges, but animates correct. |
e2006-08-12-01: §M(2)PX
animation of the stroke-dasharray property:
Animation of stroke-dasharray of a blue path containing subpaths.
The path is divided in five paths of the same length, altogether
with a length of 4000.
stroke-dasharray is animated from 0,4000 to 4000,0 in 10s.
This means, the complete path is at the beginning invisible and
is painted completely visible to the end. Light blue paths
are animated simulating the animation just for comparison.
Is the stroke-dasharray continued with the beginning of a new
subpath or restarted with the initial dash?
In the stroke-dasharray section of the specification (1.1)
it is not mentioned, how to handle the continuation of dasharray
in subpaths, but in the path chapter we find in the moveto
section (8.3.2):
'The "moveto" commands (M or m) establish a new current point.
The effect is as if the "pen" were lifted and moved to a new location.'
This sounds more as a continuation of dasharray as like a restart,
but it is a very weak hint, anyway it is the only useful behaviour.
Anyway the W3C SVG working group leaves this explicitely open
in SVG1.2tiny.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | element ignored |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | discrete animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | discrete animation, not linear |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| 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 animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation |
e2008-03-14-21: §UA(I)
Lorenz Attractor:
Animation of the Lorenz-Attractor.
The trajectory is approximately painted using an animation of
the stroke-dasharray property.
Additionally for comparison a small circle is moved along the
same path using animateMotion. Both have the same timing.
The buttons bottom right (or the related GET parameters)
can be used to influence, whether the animation continues manually
or automatically or if it restarts.
In case of need the GET parameters can be used to define the
start position and other parameters. s is a parameter for scaling,
dur the duration in seconds (optional anz the number of animation points,
per default 20*dur).
Differential equation:
dx/dt = k(y-x)
dy/dt = l x - y - x z
dz/dt = x y - m z
The problem is rotated with an angle o (in degree) around the direction (x, y, z).
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, incomplete display |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | display nonsense |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | wrong timing of stroke-dasharray animation, discrete animation |
| Opera8.02/50/ 9tp2/ beta1/2/ | fail | no animation; Opera bug-174721 |
| Opera9tp1/ 9.00/9.10 | (ok) | poor interpolation at the end of the 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/ 60.0 | ok | - |
| Gecko 24.0/ 36.0/ 48.0 | (ok) | timing problems at the end of the animation |
e2008-03-15-01: §P
discrete stroke-dasharray animation:
stroke-dasharray is animated discrete with different list item number lengths
as values. Because stroke-dasharray is defined as a pattern,
each list item can be expanded to the least common multiple
for comparison.
The blue test case has always the same pattern as the dark
blue reference pattern behind it using an expanded list.
A light blue pattern on top indicates the same pattern using
simple set animations of display.
If the blue test case is not always between the reference pattern and the
reference pattern not always below and on top of the test case, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, no stroke-dasharray |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | partly wrong animation |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | slightly wrong pathLength |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-15-02: §P
stroke-dasharray animation:
stroke-dasharray is animated linear with different list item number lengths
as values. Because stroke-dasharray is defined as a pattern,
each list item can be expanded to the least common multiple
for comparison and for a continuous animation.
The blue test case has always the same pattern as the dark
blue reference pattern behind it using an expanded list.
A light blue pattern on top indicates the same pattern using
simple from-to animations for each interpolation step.
If the blue test case is not always between the reference pattern and the
reference pattern not always below and on top of the test case, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, no stroke-dasharray |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | wrong animation |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | discrete animation, slightly wrong pathLength |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1 | fail | discrete 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 | mixture of continuous and discrete animation |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0 | fail | dark blue comparison not animated, instabilities for test case |
e2008-03-15-03: §P
stroke-dasharray and rectangle:
A blue rectangle with rounded corners is painted within 20s.
The shape is given in gray for comparison.
A black arrow and a thin black line show the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | crashes browser |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | confused animation |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | discrete animation, wrong start position |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1 | fail | wrong start position and direction, stroke incomplete |
| Opera9tp2/ beta1/2 | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | curious centered hole |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | curious centered hole |
e2008-03-15-04: §P
stroke-dasharray and circle:
stroke-dasharray and circle 2:
A blue circle is painted within 20s (60s).
The shape is given in gray for comparison.
A black arrow and a thin black line show the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | crashes browser |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | confused animation |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | discrete animation, slightly wrong start position |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1 | fail | wrong start position and direction, stroke incomplete |
| Opera9tp2/ beta1/2/ | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | slightly wrong start position, curious centered hole |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | second example incomplete rendering |
| Gecko 60.0 | fail | curious centered hole |
e2008-03-15-05: §P
stroke-dasharray and ellipse:
stroke-dasharray and ellipse 2:
A blue ellipse is painted within 20s (60s).
The shape is given in gray for comparison.
A black arrow and a thin black line show the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | crashes browser |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | confused animation
(second sample frozen) |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | discrete animation, slightly wrong start position |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1 | fail | wrong start position and direction, stroke incomplete |
| Opera9tp2/ beta1/2/ | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | slightly wrong start position, curious centered hole |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | second example incomplete rendering |
| Gecko 60.0 | fail | curious centered hole |
e2008-03-15-06: §P
stroke-dasharray and polygon:
A blue polygon with the shape of a triangle is painted within 20s.
The shape is given in gray for comparison.
A black arrow and a thin black line show the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | crashes browser |
| Amaya11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, crashes browser |
| WebKit 528.16 | fail | confused animation |
| Adobe | fail | no animation of stroke-dasharray |
| Squiggle 1.7 | fail | discrete animation, stroke incomplete |
| Opera8.02/50 | fail | no animation; Opera bug-174721 |
| Opera9tp1 | fail | wrong start position, stroke incomplete |
| Opera9tp2/ beta1/2/ | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | flickering starting area |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results stroke-dasharray property
| 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 | 1/10 | 1/10 |
| WebKit 528.16 | 2/10 | 2/10 |
| Adobe | 0/10 | 0/10 |
| Squiggle 1.7 | 1/10 | 1/10 |
| Opera8.02/50 | 0/10 | 0/10 |
| Opera 9tp1 | 6/10 | 6/10 |
| Opera 9tp2/ beta1/2 | 1/10 | 1/10 |
| Opera 9.00/9.10 | 1/10 | 2/10 |
| Opera 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 3/10 | 3/10 |
| Gecko 2.0/ 8.0/ 12.0/ 48.0 | 7/10 | 7/10 |
| Gecko 24.0/ 36.0/ 60.0 | 6/10 | 6/10 |
stroke-dashoffset
e2005-08-28-15: §Q
set animation of the
stroke-dashoffset property:
The stroke-dashoffset of a rect is set from 0 to 50 after 5 seconds.
The gray parts should be covered completely by blue parts after this 5 seconds.
Test results *
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | element ignored |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
* The behaviour for corners ist not well defined, the visible results can be different.
e2005-08-28-16: §M(2)P
animate animation of the stroke-dashoffset property:
The stroke-dashoffset of a rect is changed in a way that it looks like the shape of the
rect is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| 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 | fail | wrong animation |
| Opera9tp1 | fail | wrong animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-17: §M(2)P
animate animation of the stroke-dashoffset property:
The stroke-dashoffset of a path is changed in a way that it looks like the shape of the
rect is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-18: §M(2)P
animate animation of the stroke-dashoffset property:
A blue line is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | (ok) | minor problems at the animation begin |
| Opera9tp1 | (ok) | minor problems at the animation begin |
| 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-08-28-19: §M(2)P
animate animation of the stroke-dashoffset property:
A blue rectangle with rounded corners is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | wrong and incomplete animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong start and direction, path not completely closed |
| Opera8.02/50 | fail | wrong and incomplete animation |
| Opera9tp1 | fail | wrong and incomplete animation |
| Opera9tp2/ beta1/ 10.60/ 11.00/11.60/ 12,00 | fail | path not completely closed |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-20: §M(2)P
animate animation of the stroke-dashoffset property:
A blue triangle is painted within 20s (using path and pathLength).
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | pathLength ignored and therefore incomplete animation |
| WebKit 528.16 | fail | initially wrong and pathLength ignored |
| Adobe | fail | pathLength ignored and therefore incomplete animation |
| Squiggle 1.7 | fail | wrong start, pathLength ignored and therefore incomplete animation |
| Opera8.02/50 | fail | pathLength ignored and therefore incomplete animation |
| Opera9tp1/2 | fail | last edge not painted |
| Opera beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | fail | pathLength ignored and therefore incomplete animation |
| Gecko 24.0 | ok | - |
e2005-08-28-21: §M(2)P
animate animation of the stroke-dashoffset property:
A blue circle is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | fail | wrong starting point |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong direction of animation |
| Opera9tp1 | fail | wrong direction of animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-22: §M(2)P
animate animation of the stroke-dashoffset property:
A blue ellipse is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | fail | wrong starting point |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong direction of animation |
| Opera9tp1 | fail | wrong direction of animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-28-23: §M(2)P
animate animation of the stroke-dashoffset property:
A blue polyline is painted within 20s.
The shape is given in gray for comparison.
A black arrow shows the starting point and the direction
of the animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | wrong behaviour for last part of the path |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | (ok) | minor problems at the animation begin |
| Opera9tp1 | (ok) | minor problems at the animation begin |
| 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-08-28-24: §Q
set animation of
several stroke and fill properties:
To be fair to the abilities of KSVG, this is a more simple set animation to single elements.
Each 3s another stroke or fill property is set to another
value. Animated properties: stroke, stroke-width, stroke-linecap,
stroke-linejoin, stroke-dasharray, stroke-dashoffset, fill, fill-rule.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | (ok) | * |
| WebKit 528.16 | (ok) | * |
| Adobe | fail | no animation of stroke-dasharray * |
| Squiggle 1.7 | (ok) | * |
| Opera8.02/50 | fail | no animation of several properties * |
| 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 | * |
* wrong combination of stroke-linecap and stroke-dasharray, stroke-dasharray is a pattern and defines no subpaths,
therefore the stroke-linecap has only applied to the caps of the line and not to all dashes of the stroke-dasharray.
Test results stroke-dashoffset property
| 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 | 7/10 | 7/10 |
| WebKit 528.16 | 8/10 | 8/10 |
| Adobe | 6/10 | 6/10 |
| Squiggle 1.7 | 8/10 | 8/10 |
| Opera8.02/50 | 4/10 | 4/10 |
| Opera 9tp1 | 6/10 | 6/10 |
| Opera 9tp2 | 8/10 | 8/10 |
| Opera 9beta1 | 9/10 | 9/10 |
| Opera 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ | 10/10 | 10/10 |
| Opera 10.60/ 11.00/11.60/ 12,00 | 9/10 | 9/10 |
| Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | 9/10 | 9/10 |
| Gecko 24.0 | 10/10 | 10/10 |
stroke-opacity
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-28-31: §Q
set animation of the
stroke-opacity property:
Several shapes in a group change their stroke-opacity from
0.8 to 0.5 after 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-28-32: §Q
animate animation of the
stroke-opacity property:
Several shapes in a group change their stroke-opacity from
1 to 0 in 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation, may work for single elements and not groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-31: §Q
additivity of stroke-opacity:
Several shapes in a group are referenced with a use element. This changes
its stroke-opacity with additive animations on the left.
This is compared with a use on the right using simpler animations to get the
same effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | area of opacity incomplete, no animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | wrong or no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-32: §Q
additivity of stroke-opacity:
Several shapes in a group are referenced with a use element. This changes
its stroke-opacity with out of range values and stroke-opacity with additive animations on the left.
This is compared with a use on the right using simpler animations to get the
same effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | area of opacity incomplete, no animation |
| KSVG1 | fail | no animation for groups |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | wrong or no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | fail | wrong animation |
| Gecko 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-01: §M(2)P
inherited animated stroke-opacity:
Animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles.
This fill is animated with a begin of 9.5s and a dur of 10s with some values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke-opacity, beginning at 2s with a
dur of 10s with some values.
The last value is inherit. This means, it interpolates to the current
inherited value. After the active duration the value inherit is frozen,
this means the stroke-opacity value is the same as that of the small circle after
12s.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with a
simpler values list.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-02: §M(2)P
inherited animated stroke-opacity:
Animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles.
This stroke-opacity is animated with a begin of 2s and a dur of 10s with three values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke-opacity, beginning at 2s with a
dur of 10s with the values 0.5;inherit and an end at 7s.
After the active duration the value of 50 percent 0.5
and 50 percent inherit is frozen.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with
simpler animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
| Gecko 60.0 | fail | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-03: §M(2)P
inherited animated stroke-opacity:
Discrete animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles.
This stroke-opacity is animated with a begin of 2s and a dur of 12.5s with five values.
The small circle shows the current value of the group for comparison.
The large circle has its own animation of stroke-opacity, beginning at 2s with a
dur of 15s with the values inherit;0.5;inherit.
After the active duration the value is frozen.
The fill of the large circle has the same appearance as the stroke all
the time. But the animation is realised without inheritance and with
simpler set animations.
A difference between the fill and the stroke of the large circle indicates
an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | - |
| Adobe | fail | - |
| Squiggle 1.7 | fail | - |
| 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 | - |
| Gecko 2.0/ 8.0/ 60.0 | fail | minor timing problems |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | ok | - |
Test results stroke-opacity property
| user-agent | SVG 1.1 |
| user-agent | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 |
| KSVG1 | 0/7 |
| WebKit 528.16 | 4/7 |
| Adobe | 4/7 |
| Squiggle 1.7 | 4/7 |
| Opera8.02/50/ 9tp1 | 2/7 |
| 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 | 4/7 |
| Gecko 2.0/ 8.0 | 5/7 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | 6/7 |
| Gecko 60.0 | 4/7 |
Test results stroke properties
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/51 | 0/58 |
| KSVG1 | 11/51 | 11/58 |
| WebKit 528.16 | 27/51 | 31/58 |
| Adobe | 26/51 | 30/58 |
| Squiggle 1.7 | 27/51 | 31/58 |
| Opera8.02/50 | 12/51 | 14/58 |
| Opera9tp1 | 25/51 | 27/58 |
| Opera9tp2 | 28/51 | 32/58 |
| Opera9 beta1 | 29/51 | 33/58 |
| Opera9 beta2 | 30/51 | 34/58 |
| Opera9.00/9.10 | 35/51 | 39/58 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | 36/51 | 40/58 |
| Opera10.60 | 35/51 | 39/58 |
| Opera11.00/11.60/ 12,00 | 32/51 | 36/58 |
| Gecko 2.0/ 8.0 | 44/51 | 50/58 |
| Gecko 12.0/ 24.0/ 48.0 | 44/51 | 51/58 |
| Gecko 36.0 | 43/51 | 50/58 |
| Gecko 60.0 | 38/51 | 42/58 |
Visibility and display properties
visibility
e2005-08-28-41: §Q
set animation of the visibility property:
The visibility of a circle is set to hidden after 3s for 6s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | circle disappears forever |
| 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-08-28-42: §Q
animate animation of the visibility property:
The visibility of a circle is set to collapse after 3s for 3s. This is repeated.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | circle disappears forever
without waiting 3s |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
display
e2005-08-28-51: §Q
set animation of the display property:
The display of a circle is set to none after 3s for 6s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | circle disappears forever |
| 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-08-28-52: §Q
animate animation of the display property:
The display of a circle is set to none after 3s for 3s. This is repeated.
Note, that display has much more values than 'none', 'block' and 'inline' used
in these examples, but the others seem to be not very important for SVG.
Test results
| 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 | - |
Test results visibility and display properties
| 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 | 3/4 | 3/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 |
Rendering Properties
e2005-08-28-71: §Q
animateColor animation of the color-rendering property:
A fast color animation is applied to two rectangles,
one on the left, one on the right. Within 0.1s several colors
are animated. With a discrete animation the values of
the color-rendering property are changed all 5s .
If this attribute is supported somehow, there have to be
differences between the left and the right rectangle
for 5s and other differences after this
again for 5s, after this it has to be 5s the same.
Then the animation is repeated. Overall there have to
be some differences between left and right within 15s.
Note: For a perfect and very fast user-agent there should be no
difference at all, maybe you have to use an old computer or you
have to slow down your processor to avoid too much perfection ;o)
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail? | * |
| Squiggle 1.7 | fail? | * |
| 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 | fail? | * |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
* even with an old computer or a display with ssh there was no difference,
but sometimes there are disturbances in both rectangles equally, not just in one.
Therefore I am quite sure, this attribute is not supported. In the documentation of Opera9 beta is
noted, that this is not supported.
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-01: §Q
animation of the color-interpolation property:
A fast color animation is applied to two rectangles,
one on the left, one on the right. Within 0.1s several colors
are animated. With a discrete animation the values of
the color-interpolation property are changed all 5s.
If this attribute is supported somehow, there have to be
differences between the left and the right rectangle
between for 5s and other differences after this
again for 5s, after this it has to be 5s the same.
Then the animation is repeated.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail? | * |
| Squiggle 1.7 | fail? | * |
| 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 | fail? | * |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
* No visible effect, either this user-agents are able to give optimal results for
any condition or they simply ignore this properties. If anybody knows a better
test, please send me an email.
color-interpolation-filters property: see filter section.
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-02: §Q
animation of the shape-rendering property:
Each second the shape-rendering is changed. The values are:
auto;geometricPrecision;crispEdges;optimizeSpeed.
With geometricPrecision the shapes are exact as defined
in the document, with crispEdges the user agent shall attempt
to emphasize the contrast for example by switching off the
anti-aliasing, here especially for the thin red line on top.
optimizeSpeed may simplify the rendering of the shapes.
auto may be close to the rendering of geometricPrecision.
fill of a circle is changed between gray and black just for timing.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation * |
| WebKit 528.16 | ok | (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but
a clear difference between both groups) |
| Adobe | ok | (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but
a clear difference between both groups) |
| Squiggle 1.7 | ok | just geometricPrecision results in different rendering, auto seems to
be related to the previous value |
| Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta | fail | no animation * (partly fixed in 9.50 beta2) |
| Opera9 beta1 | fail | crashes immediately |
| Opera9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | animates, but still the blue path has corners * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but
a clear difference between both groups) |
* For KSVG and Opera the quality of the rendered path is very poor. There is no
corner in center top, the path is a continuously differentiable curve without edges and
corners.
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-03: §Q
animation of the text-rendering property:
Each second the text-rendering is changed. The values are:
auto;optimizeSpeed;optimizeLegibility;geometricPrecision
With geometricPrecision the shapes are exact as defined
in the font, with optimizeLegibility the user agent shall attempt
to emphasize the contrast for example by switching on the
anti-aliasing or changing the font.
optimizeSpeed may simplify the rendering of the shapes.
auto may be close to the rendering of optimizeLegibility.
fill of a circle is changed between gray and black just for timing.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | (maybe no difference between optimizeSpeed and optimizeLegibility) |
| Squiggle 1.7 | (ok) | (maybe no difference between some values) |
| Opera8.02/50 9tp1/2/ 10.0 alpha/beta/ 10.0 | fail | no animation |
| Opera9 beta1 | fail | crashes immediately |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.60/ 11.00/11.60/ 12,00 | (ok) | (maybe no difference between some values) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | (only optimizeLegibility different) |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-04: §Q
animation of the image-rendering property:
Each second the image-rendering is changed. The values are:
auto;optimizeSpeed;optimizeQuality
With optimizeQuality the image should the resampled more
sophisticated, resuling in a smoother rendering.
optimizeSpeed may simplify the rendering of the image.
auto may be close to the rendering of optimizeQuality.
fill of a circle is changed between gray and black just for timing.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | (maybe no difference between auto and optimizeQuality) |
| Squiggle 1.7 | ok | (maybe no difference between auto and optimizeQuality) |
| Opera8.02/50/ 9tp1 | fail | no animation |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | (maybe no difference between auto and optimizeQuality) |
| Gecko 2.0/ 24.0/ 60.0 | ok | (maybe no difference between auto and optimizeQuality) |
| Gecko 8.0/ 12.0/ 36.0/ 48.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-05: §Q
animation of the color-rendering property for a linearGradient:
color-rendering is set from optimizeQuality to optimizeSpeed after 3s and
to auto after another 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| 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 | fail | no animation |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-06: §Q
animation of the color-interpolation property for a linearGradient:
color-interpolation is set from auto to linearRGB after 3s and to sRGB
after another 3s and then to auto again.
When the animation is finished, the fill is set to yellow.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | ok | no difference between auto and sRGB, this is ok according to the specification |
| Squiggle 1.7 | fail | no animation |
| 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 | fail | no animation |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-07: §Q
animation of the color-interpolation property with opacity:
A fast color animation is applied to two rectangles,
one on the left, one on the right. Within 0.1s several colors
are animated. With a discrete animation the values of
the color-interpolation property are changed all 5s .
If this attribute is supported somehow, there have to be
differences between the left and the right rectangle
between for 5s and other differences after this
again for 5s, after this it has to be 5s the same.
Then the animation is repeated.
opacity is animated from 0.3 to 1 in 5s with repetition.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | no visible difference |
| Squiggle 1.7 | fail | no animation |
| 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 | fail | no visible difference |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no visible difference |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-08: §Q
animation of the color-rendering property with opacity:
A fast color animation is applied to two rectangles,
one on the left, one on the right. Within 0.1s several colors
are animated. With a discrete animation the values of
the color-rendering property are changed all 5s .
If this attribute is supported somehow, there have to be
differences between the left and the right rectangle
between for 5s and other differences after this
again for 5s, after this it has to be 5s the same.
Then the animation is repeated.
opacity is animated from 0.3 to 1 in 5s with repetition.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no animation |
| Adobe | fail | no visible difference |
| Squiggle 1.7 | fail | no animation |
| 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 | fail | no visible difference |
| Opera9 beta1 | fail | crashes immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no visible difference |
Test results rendering properties
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/1 | 0/9 |
| KSVG1 | 0/1 | 0/9 |
| WebKit 528.16 | 0/1 | 1/9 |
| Adobe | 0/1 | 4/9 |
| Squiggle 1.7 | 0/1 | 3/9 |
| Opera8.02/50 | 0/1 | 0/9 |
| Opera9tp1 | 0/1 | 0/9 |
| Opera9tp2/ beta1 | 0/1 | 1/9 |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.60/ 11.00/11.60/ 12,00 | 0/1 | 2/9 |
| Opera10.0 alpha/beta/ 10.0 | 0/1 | 1/9 |
| Gecko 2.0/ 24.0/ 60.0 | 0/1 | 3/9 |
| Gecko 8.0/ 12.0/ 36.0/ 48.0 | 0/1 | 2/9 |
Markers
Markers are not part of SVG tiny or basic.
e2005-10-02-01: §Q
set animation of the markerUnits attribute:
The markerUnits attribute is set from strokeWidth
to userSpaceOnUse after 3s for 3s.
The marker becomes very small in these 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-02: §M(2)P
set animation of the refX and refY attributes:
refX and refY of the marker element are set to different values
after 3s and 6s for 6s and 3s.
Positions of the marker are given in light gray.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | just one set, not both |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1 | fail | property overflow wrong in animation |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-03: §Q
animation of the refX and refY attributes:
refX and refY of the marker element are animated with
a duration of 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1 | fail | property overflow wrong in animation |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-04: §Q
set animation of the markerWidth and markerHeight attributes:
markerWidth and markerHeight of the marker element are set to different values
after 3s and 6s for 6s and 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | just one set, not both |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-05: §M(2)P
animation of the markerWidth and markerHeight attributes:
markerWidth and markerHeight of the marker element are animated with
a duration of 10s. Gray markers show the initial and final values.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1 | fail | property overflow wrong in animation |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-06: §Q
set animation of the orient attribute:
orient of the marker element are set from 0 to 180
after 3s for 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | animated, but result seems to have a strange clipping path |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation (including error messages) |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-07: §Q
animation of the orient attribute:
orient of the marker element are changes from 0 to 360
in 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation (including error messages) |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1 | fail | no animation |
| Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-08: §Q
animateTransform of a marker
path:
The path in a marker element is rotated with animateTransform in 10s
with repetition.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | completely confused |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong marker position,
no animation |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ beta1 | fail | property overflow wrong in 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/ 48.0/ 60.0 | ok | - |
| Gecko 24.0/ 36.0 | fail | no animation |
e2005-10-02-09: §Q
set animation of the marker-end property:
The marker-end property is set from one marker
to another after 3s for 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | animated, but result seems to have a strange clipping path |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ 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 | property overflow wrong in animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-10: §Q
set animation of the marker-start property:
The marker-start property is set from one marker
to another after 3s for 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | animated, but result seems to have a strange clipping path |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ 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 | property overflow wrong in animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-11: §Q
set animation of the marker-mid property:
The marker-mid property is set from one marker
to another after 3s for 3s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | animated, but result seems to have a strange clipping path |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | element ignored |
| Opera9tp2/ 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 | property overflow wrong in animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-02-12: §Q
set animation of the marker property:
The marker property is set from one marker
to another after 3s for 3s.
According to the DTD, this property is only available with CSS, not with XML.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | animated, but result seems to have a strange clipping path |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | no animation, wrong error message |
| Opera8.02/50/ 9tp1/2 | fail | element or property ignored |
| Opera9 beta1 | fail | property overflow wrong in 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 | - |
e2009-08-06-01: §Q
marker and animated path:
A path with marker elements is animated within 60s.
The markers are always aligned along the path.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | no marker, no animation |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 48.0/ 60.0 | ok | - |
| Gecko 24.0/ 36.0 | fail | path for a short time cut/incomplete |
e2009-08-06-02: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
There is no visible change of the path appearance,
but there are underlying red triangles indicating the
position and alignment. The markers have to cover
the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong marker alignment |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | wrong marker alignment |
| Gecko 48.0/ 60.0 | ok | - |
e2009-08-06-03: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
There are underlying red triangles indicating the
position and alignment. The markers have to cover
the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong marker alignment |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | wrong marker alignment |
| Gecko 48.0/ 60.0 | ok | - |
e2009-08-06-04: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
There is no visible change of the path appearance,
but there are underlying red triangles indicating the
position and alignment. The markers have to cover
the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong marker alignment |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | wrong marker alignment |
| Gecko 48.0/ 60.0 | ok | - |
e2009-08-06-05: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
There are underlying red triangles indicating the
position and alignment. The markers have to cover
the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong marker alignment |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | wrong marker alignment |
| Gecko 48.0/ 60.0 | ok | - |
e2009-08-08-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
For an intermediate time of 10s two markers have
no direction, therefore they point to the right.
There are underlying red triangles indicating the
position and alignment.
The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong marker position and alignment |
| Adobe | fail | bottom one wrong |
| Squiggle 1.7 | fail | partly missing markers |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | wrong marker alignment |
| 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 marker alignment |
e2009-08-09-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
The control points and the path are indicated in gray.
There are underlying red triangles indicating the
position and alignment.
The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position and alignment |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong and partly missing markers |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0 | ok | - |
| Gecko 24.0/ 36.0 | fail | wrong marker alignment |
| Gecko 48.0/ 60.0 | ok | - |
e2009-08-10-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
The control points and the path are indicated in gray.
There are underlying red triangles indicating the
position and alignment.
The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position and alignment |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong and partly missing markers |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong marker alignment |
e2009-08-11-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s.
The markers are always aligned along the path.
The control points and the path are indicated in gray.
There are underlying red triangles indicating the
position and alignment.
The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position and alignment |
| Adobe | fail | wrong alignment |
| Squiggle 1.7 | fail | wrong and partly missing markers |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong marker alignment |
e2009-08-12-01: §M(1)P
marker and animated path:
Paths with marker elements are animated within 30s.
The markers are always aligned along the path.
There are underlying red triangles indicating the
position and alignment.
The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51 | fail | ignored |
| Amaya11.3.1 | fail | position confused, no animation |
| KSVG1 | fail | crashes |
| WebKit 528.16 | fail | wrong marker position and alignment |
| Adobe | fail | top left wrong alignment |
| Squiggle 1.7 | fail | wrong and partly missing markers |
| Opera8.02/50/ 9tp1 | fail | no marker |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong marker alignment |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong marker alignment |
Test results Markers
| user-agent | SVG 1.1 |
| user-agent | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/22 |
| KSVG1 | 1/22 |
| WebKit 528.16 | 1/22 |
| Adobe | 17/22 |
| Squiggle 1.7 | 4/22 |
| Opera8.02/50/ 9tp1 | 0/22 |
| Opera9tp2 | 8/22 |
| Opera9 beta1 | 5/22 |
| Opera9 beta2/ 9.00/9.10 | 14/22 |
| Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 15/22 |
| Gecko 2.0/ 8.0/ 12.0 | 14/22 |
| Gecko 24.0/ 36.0 | 10/22 |
| Gecko 48.0/ 60.0 | 17/22 |
Test results filling, stroking etc
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 0/72 | 0/117 |
| Amaya11.3.1 | 2/72 | 2/117 |
| KSVG1 | 12/72 | 13/117 |
| WebKit 528.16 | 34/72 | 44/117 |
| Adobe | 38/72 | 68/117 |
| Squiggle 1.7 | 38/72 | 54/117 |
| Opera8.02/50 | 18/72 | 22/117 |
| Opera9tp1 | 34/72 | 38/117 |
| Opera9tp2 | 39/72 | 56/117 |
| Opera9 beta1 | 40/72 | 54/117 |
| Opera9 beta2 | 41/72 | 65/117 |
| Opera9.00/9.10 | 48/72 | 72/117 |
| Opera9.50 alpha/beta/ 9.52 | 54/72 | 80/117 |
| Opera10.0 alpha/beta/ 10.0 | 54/72 | 79/117 |
| Opera10.60 | 53/72 | 79/117 |
| Opera11.00 | 47/72 | 73/117 |
| Opera11.60/ 12,00 | 46/72 | 72/117 |
| Gecko 2.0 | 62/72 | 90/117 |
| Gecko 8.0 | 62/72 | 89/117 |
| Gecko 12.0 | 62/72 | 90/117 |
| Gecko 24.0 | 62/72 | 87/117 |
| Gecko 36.0 | 61/72 | 85/117 |
| Gecko 48.0 | 62/72 | 93/117 |
| Gecko 60.0 | 53/72 | 82/117 |
