svg-repaint-path.svg 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. <script>
  5. <![CDATA[
  6. var stateIndex = 0;
  7. var currentTarget = 0;
  8. function stateA()
  9. {
  10. document.getElementById("A").textContent = '|A|';
  11. document.getElementById("B").textContent = 'B';
  12. currentTarget = 0;
  13. startAnimation();
  14. }
  15. function stateB()
  16. {
  17. document.getElementById("A").textContent = 'A';
  18. document.getElementById("B").textContent = '|B|';
  19. currentTarget = 1;
  20. startAnimation();
  21. }
  22. var intervalId = null;
  23. function startAnimation() {
  24. if (intervalId == null) {
  25. intervalId = setInterval(animationStep, 20);
  26. }
  27. }
  28. function animationStep() {
  29. if (Math.abs(stateIndex - currentTarget) < .001) {
  30. clearInterval(intervalId);
  31. intervalId = null;
  32. return;
  33. }
  34. if (stateIndex < currentTarget) {
  35. stateIndex += 1 / 128;
  36. } else {
  37. stateIndex -= 1 / 128;
  38. }
  39. var elt = document.getElementById("targetGroup");
  40. var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 + stateIndex) + ")" ;
  41. var opacity = 1 - .75 * stateIndex;
  42. elt.setAttribute("opacity", opacity);
  43. elt.setAttribute("transform", transform);
  44. }
  45. ]]>
  46. </script>
  47. <text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text>
  48. <text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text>
  49. <text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text>
  50. <text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text>
  51. <circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" />
  52. <g>
  53. <rect id="targetGroup" fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
  54. <image x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif" />
  55. </g>
  56. </svg>