Exemple d'animation SVG - Déplacement horizontal

code ci-dessous



<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Demo</title>
  <rect id="carre_1" height="140" width="140" y="60" x="20" fill="#ff0000"/>
  <rect id="carre_2" height="140" width="140" y="90" x="50" fill="#ff7f00">
    <animate attributeName="x" values="50; 100; 50" begin="cercle_1.mousedown" dur="2s" fill="freeze"/>
  </rect>
  <circle id="cercle_1" r="20" cy="140" cx="240" fill="#007f00"/>
 </g>
</svg>