1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<script xlink:href="../smil-util.js" type="text/javascript"/>
<script>
window.addEventListener("MozReftestInvalidate", run, false);
function run() {
setTimeAndSnapshot(101, true);
}
</script>
<defs>
<g id="smiley">
<circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0"
r="20"/>
<circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7"
r="7"/>
<circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7"
r="7"/>
<circle cx="-5" cy="-7" r="2"/>
<circle cx="5" cy="-7" r="2"/>
<path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/>
</g>
</defs>
<!-- to animation
This should interpolate from 0 (not 1) to 4 to match the behaviour
required by the SVGT1.2 test suite and Opera's behaviour.
-->
<g transform="translate(50 50)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" to="4" begin="100s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- from-to animation -->
<g transform="translate(150 50)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- negative to-animation
Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor
should be -2, so we add a rotation animation to correct the gradient
-->
<g transform="translate(250 50)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/>
<animateTransform attributeName="transform"
type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/>
</use>
</g>
<!-- by animation
The behaviour at this point is not clear. The definition of by-animation
is:
"simple animation in which the animation function is defined to offset
the underlying value for the attribute, using a delta that varies over
the course of the simple duration, starting from a delta of 0 and ending
with the delta specified with the by attribute." (SMILANIM 3.2.2)
Therefore it might seem like by-animation of by="1" means to ADD to the
underlying scale factor. Furthermore, the underlying scale factor when
not otherwise specified might seemt to be 1, but the SVG WG have decided
it's 0. This is inconsistent with the definition of addition for
animateTransform (post-multiplication of matrices) but it is the
behaviour required by SVGT1.2 test suite and used by Opera.
The following animation should go from 0 to 4, over 2s so at t=1s, the
scale factor should be 2.
-->
<g transform="translate(50 150)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" by="4" begin="100s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- by animation #2 -->
<g transform="translate(150 150)">
<use xlink:href="#smiley" transform="scale(4)">
<animateTransform attributeName="transform"
type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/>
</use>
</g>
<!-- from-by animation -->
<g transform="translate(250 150)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- values animation -->
<g transform="translate(50 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform"
type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- repetition -->
<g transform="translate(150 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" type="scale" from="0"
to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum"
fill="freeze"/>
</use>
</g>
<!-- repeated to-animation (should NOT accumulate) -->
<g transform="translate(250 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" type="scale"
to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum"
fill="freeze"/>
</use>
</g>
</svg>
|
