• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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[
7var stateIndex = 0;
8var currentTarget = 0;
9
10function stateA()
11{
12    document.getElementById("A").textContent = '|A|';
13    document.getElementById("B").textContent = 'B';
14
15    currentTarget = 0;
16    startAnimation();
17}
18
19function stateB()
20{
21    document.getElementById("A").textContent = 'A';
22    document.getElementById("B").textContent = '|B|';
23    currentTarget = 1;
24    startAnimation();
25}
26
27var intervalId = null;
28
29function startAnimation() {
30    if (intervalId == null) {
31	intervalId = setInterval(animationStep, 20);
32    }
33}
34
35function 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 id="targetGroup">
69            <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
70
71	        <foreignObject 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
82