SVG Animation Elements

animateSVG.html

<!--/********** Animation Element **********/-->

<!-- 1. animate -->

<svg width="120" height="120" viewPort="0 0 120 120" version="1.1">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>
<!--
    attributeName: Nombre del atributo al que afectará la animación.
             from: Punto de partida del elemento animado.
               to: Punto final del elemento animado.
              dur: Duración de la animación.
      repeatCount: cantidad de repeticiones.
-->

<!-- 2. animateMotion -->

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- La etiqueta Path dibuja la elipse que recorrera el circulo rojo -->
  <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
      stroke="lightgrey" stroke-width="2" 
      fill="none" id="theMotionPath"/>
  <!-- Se dibujan ambos circulos grises a cada extremo de la elipse -->
  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
  <circle cx="110" cy="10" r="3" fill="lightgrey"  />

  <!-- El circulo rojo que recorrera la elipse. -->
  <circle cx="" cy="" r="5" fill="red">

    <!-- Se define la etiqueta de animación animateMotion -->
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>
</svg>
<!--
  <mpath>: El atributo xlink se usa para referenciar al path que recorrerá el círculo.
-->

<!-- 3. animateTransform -->
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>