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 <image id="targetGroup" x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif" /> 72 </g> 73 74 75 </svg> 76 77 78
