blob: 603c7f4025242a0d53ea2612d7f285f109c56bf7 (
plain)
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
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait"
onload="setTimeAndSnapshot(101, true)">
<script xlink:href="../smil-util.js" type="text/javascript"/>
<defs>
<g id="smiley">
<circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
r="40"/>
<circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
r="14"/>
<circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
r="14"/>
<circle cx="-10" cy="-14" r="4"/>
<circle cx="10" cy="-14" r="4"/>
<path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
</g>
</defs>
<!-- from-to animation -->
<g transform="translate(50 50)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s"/>
</use>
</g>
<!-- from-by animation -->
<g transform="translate(150 50)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="60" by="-60" begin="100s" dur="2s"/>
</use>
</g>
<!-- by animation -->
<g transform="translate(250 50) skewX(-15)">
<use xlink:href="#smiley" transform="skewX(15)">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" by="60" begin="100s" dur="2s"/>
</use>
</g>
<!-- to animation -->
<g transform="translate(50 150)">
<use xlink:href="#smiley" transform="skewX(15)">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" to="45" begin="100s" dur="2s"/>
</use>
</g>
<!-- values animation -->
<g transform="translate(150 150)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" values="10; 40; 20; 60" begin="100s" dur="2s"/>
</use>
</g>
<!-- additive -->
<g transform="translate(250 150)">
<use xlink:href="#smiley" transform="skewY(-30)">
<animateTransform attributeName="transform" attributeType="XML"
type="skewY" fill="freeze" to="30" begin="100s" dur="2s"/>
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s" additive="sum"/>
</use>
</g>
<!-- accumulate: none -->
<g transform="translate(50 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="20" to="50" begin="100s" dur="0.75s"
repeatCount="3"/>
</use>
</g>
<!-- accumulate: sum -->
<g transform="translate(150 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="0" to="22.5" begin="100s" dur="0.75"
accumulate="sum" repeatCount="3"/>
</use>
</g>
<!-- angles > 360 -->
<g transform="translate(250 250)">
<use xlink:href="#smiley">
<animateTransform attributeName="transform" attributeType="XML"
type="skewX" fill="freeze" from="-690" to="750" begin="100s" dur="2s"/>
</use>
</g>
</svg>
|
