|
1 <?xml version="1.0"?> |
|
2 <svg width="8cm" height="3cm" viewBox="0 0 800 300" |
|
3 xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> |
|
4 <desc>Example anim01 - demonstrate animation elements</desc> |
|
5 <rect x="1" y="1" width="798" height="298" |
|
6 fill="none" stroke="blue" stroke-width="2" /> |
|
7 <!-- The following illustrates the use of the 'animate' element |
|
8 to animate a rectangles x, y, and width attributes so that |
|
9 the rectangle grows to ultimately fill the viewport. --> |
|
10 <rect xml:id="RectElement" x="300" y="100" width="300" height="100" |
|
11 fill="rgb(255,255,0)" > |
|
12 <animate attributeName="x" |
|
13 begin="0s" dur="9s" fill="freeze" from="300" to="0" /> |
|
14 <animate attributeName="y" |
|
15 begin="0s" dur="9s" fill="freeze" from="100" to="0" /> |
|
16 <animate attributeName="width" |
|
17 begin="0s" dur="9s" fill="freeze" from="300" to="800" /> |
|
18 <animate attributeName="height" |
|
19 begin="0s" dur="9s" fill="freeze" from="100" to="300" /> |
|
20 </rect> |
|
21 <!-- Set up a new user coordinate system so that |
|
22 the text string's origin is at (0,0), allowing |
|
23 rotation and scale relative to the new origin --> |
|
24 <g transform="translate(100,100)" > |
|
25 <!-- The following illustrates the use of the 'set', 'animateMotion', |
|
26 'animateColor' and 'animateTransform' elements. The 'text' element |
|
27 below starts off hidden (i.e., invisible). At 3 seconds, it: |
|
28 * becomes visible |
|
29 * continuously moves diagonally across the viewport |
|
30 * changes color from blue to dark red |
|
31 * rotates from -30 to zero degrees |
|
32 * scales by a factor of three. --> |
|
33 <text xml:id="TextElement" x="0" y="0" |
|
34 font-family="Verdana" font-size="35.27" visibility="hidden" > |
|
35 It's alive! |
|
36 <set attributeName="visibility" to="visible" |
|
37 begin="3s" dur="6s" fill="freeze" /> |
|
38 <animateMotion path="M 0 0 L 100 100" |
|
39 begin="3s" dur="6s" fill="freeze" /> |
|
40 <animateColor attributeName="fill" |
|
41 from="rgb(0,0,255)" to="rgb(128,0,0)" |
|
42 begin="3s" dur="6s" fill="freeze" /> |
|
43 <animateTransform attributeName="transform" |
|
44 type="rotate" from="-30" to="0" |
|
45 begin="3s" dur="6s" fill="freeze" /> |
|
46 <animateTransform attributeName="transform" |
|
47 type="scale" from="1" to="3" additive="sum" |
|
48 begin="3s" dur="6s" fill="freeze" /> |
|
49 </text> |
|
50 </g> |
|
51 </svg> |
