|
1 <svg xmlns="http://www.w3.org/2000/svg" |
|
2 xmlns:xlink="http://www.w3.org/1999/xlink" |
|
3 xmlns:xhtml="http://www.w3.org/1999/xhtml"> |
|
4 |
|
5 <script> |
|
6 <![CDATA[ |
|
7 var stateIndex = 0; |
|
8 var currentTarget = 0; |
|
9 |
|
10 function stateA() |
|
11 { |
|
12 document.getElementById("A").textContent = '|A|'; |
|
13 document.getElementById("B").textContent = 'B'; |
|
14 |
|
15 currentTarget = 0; |
|
16 startAnimation(); |
|
17 } |
|
18 |
|
19 function stateB() |
|
20 { |
|
21 document.getElementById("A").textContent = 'A'; |
|
22 document.getElementById("B").textContent = '|B|'; |
|
23 currentTarget = 1; |
|
24 startAnimation(); |
|
25 } |
|
26 |
|
27 var intervalId = null; |
|
28 |
|
29 function startAnimation() { |
|
30 if (intervalId == null) { |
|
31 intervalId = setInterval(animationStep, 20); |
|
32 } |
|
33 } |
|
34 |
|
35 function animationStep() { |
|
36 if (Math.abs(stateIndex - currentTarget) < .001) { |
|
37 clearInterval(intervalId); |
|
38 intervalId = null; |
|
39 return; |
|
40 } |
|
41 |
|
42 if (stateIndex < currentTarget) { |
|
43 stateIndex += 1 / 128; |
|
44 } else { |
|
45 stateIndex -= 1 / 128; |
|
46 } |
|
47 |
|
48 var elt = document.getElementById("targetGroup"); |
|
49 |
|
50 var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 + stateIndex) + ")" ; |
|
51 var opacity = 1 - .75 * stateIndex; |
|
52 |
|
53 elt.setAttribute("opacity", opacity); |
|
54 elt.setAttribute("transform", transform); |
|
55 } |
|
56 |
|
57 |
|
58 ]]> |
|
59 </script> |
|
60 |
|
61 <text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text> |
|
62 <text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text> |
|
63 <text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text> |
|
64 <text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text> |
|
65 |
|
66 <circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" /> |
|
67 |
|
68 <g> |
|
69 <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" /> |
|
70 |
|
71 <foreignObject id="targetGroup" x="60" y="60" width="170" height="170" > |
|
72 <xhtml:xhtml> |
|
73 <xhtml:img src="http://www.citilink.com/~grizzly/anigifs/3dolph.gif" width="170" height="170" /><br /> |
|
74 </xhtml:xhtml> |
|
75 </foreignObject> |
|
76 </g> |
|
77 |
|
78 |
|
79 </svg> |
|
80 |
|
81 |
