Trayectorias de movimiento en SVG: mueve un icono personalizado por una curva

Usa animateMotion para mover un elemento SVG por una trayectoria y coloca un mpath dentro para hacer referencia a un trazado existente. rotate="auto" gira la ilustración en movimiento para seguir la dirección de la trayectoria. El origen local de la ilustración es el punto que recorre el trazado, por lo que un icono importado necesita un anclaje elegido expresamente.

Esto resulta útil cuando una flecha, un emblema o una ilustración pequeña personalizada debe desplazarse sin cambiar de forma. Para una línea que parece dibujarse sola, usa la animación del trazo. Para transformar una silueta en otra, usa la interpolación de trazados. Estas técnicas resuelven tareas visuales diferentes.

Mantén la trayectoria separada de la ilustración

La trayectoria define por dónde se mueve el icono. El icono define lo que ve el lector. La referencia de animateMotion de MDN describe el elemento de movimiento, mientras que su referencia de mpath muestra cómo reutilizar un trazado mediante una referencia.

El ejemplo original siguiente tiene una flecha verde azulada y un punto dorado. La flecha apunta hacia el eje X positivo, lo que facilita comprobar el efecto de la rotación automática. La ilustración está dibujada alrededor de (0, 0), en lugar de lejos del origen dentro de un lienzo exportado grande.

Guárdalo como motion.html y ábrelo en un navegador. Primero aparece el emblema estático. Pulsa Play para ejecutar un recorrido de cuatro segundos; Show static restaura la ilustración inicial.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

La curva gris visible es un use independiente de la trayectoria. Elimina ese use si el trazado debe ser invisible; conserva la definición en defs para que la animación pueda seguir haciendo referencia a ella. El elemento de movimiento pertenece al grupo cuya flecha y punto deben desplazarse juntos.

fill="freeze" conserva el estado final de la animación. No tiene relación con el relleno verde azulado de la flecha. Este ejemplo se ejecuta una vez, lo que facilita comprobar su posición final frente a un bucle infinito.

Corrige un icono que se aleja de la trayectoria

El movimiento se aplica al sistema de coordenadas del elemento. No encuentra automáticamente el centro visual de un logotipo. Si los trazados importados ocupan coordenadas cercanas a (200, 120), mover el grupo que los contiene por una trayectoria mantiene ese desplazamiento dentro del grupo.

Elige el punto de la ilustración que debe tocar la trayectoria y trasládalo a (0, 0) dentro del grupo en movimiento. Para un anclaje en (200, 120), la estructura es:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

La traslación interior prepara la ilustración; el grupo exterior recibe el movimiento. Mantén estas funciones separadas al añadir una escala o una rotación correctora. La especificación de animación SVG define el movimiento como una transformación suplementaria, por lo que las transformaciones existentes siguen afectando a la posición final.

En una insignia, el centro puede ser un anclaje adecuado. En un vehículo, quizá quieras un punto de contacto de una rueda; en un puntero, su punta. El centro del cuadro delimitador es solo una primera estimación. Comprueba el punto de contacto elegido en más de una posición de la trayectoria.

Una rotación sin desplazamiento tiene su propio problema de pivote. La guía de transform-origin en SVG explica ese caso sin añadir una trayectoria de desplazamiento.

Decide si la ilustración debe girar

Estos valores se documentan en la referencia de rotación del movimiento de MDN. auto-reverse cambia la orientación; no invierte el orden en que se recorre la trayectoria.

Si el original apunta hacia arriba, auto no sabe que arriba significa adelante. Gira un grupo interior de la ilustración hasta que apunte hacia el eje X positivo y aplica el movimiento al grupo exterior. Evita girar la propia trayectoria solo para corregir la orientación local del icono.

Las esquinas pronunciadas de la trayectoria pueden producir cambios bruscos de dirección. Una trayectoria curva es un punto de partida mejor si quieres un giro visiblemente suave. Deja también espacio alrededor de la trayectoria: un icono puede sobresalir de su línea central y quedar recortado cerca del borde del área visible del SVG.

Comprueba el inicio, el medio y el final

Abrimos la misma trayectoria y el mismo emblema en Chrome y usamos un pequeño entorno de pruebas para pausar la línea de tiempo del SVG a los 0, 2 y 4 segundos. El icono empezó abajo a la izquierda, pasó cerca de la cima y terminó abajo a la derecha. Con auto, su orientación cambió a lo largo de la curva. Con la rotación en 0, la posición intermedia fue la misma, pero la flecha permaneció horizontal.

Esa comprobación cubre este ejemplo en un navegador. No es una prueba de importación de animaciones en herramientas de diseño ni una garantía para todos los modos de incrustación de los navegadores.

Para tu propia ilustración:

1. Comprueba el punto de contacto al inicio de la trayectoria. Corrige los desplazamientos del original antes de ajustar los tiempos.
2. Pausa cerca de las curvas y confirma que la parte prevista del emblema sigue la línea.
3. Compara la rotación automática y la fija. Elige según la ilustración, sobre todo si incluye texto.
4. Comprueba que la posición final no quede recortada y que la reproducción vuelva a empezar correctamente.
5. Prueba el contexto real de entrega. Este ejemplo usa SVG en línea dentro de una página HTML con controles JavaScript.

animateMotion usa por defecto un movimiento a velocidad uniforme, como documenta MDN. Por tanto, la mitad de la duración representa aproximadamente la mitad de la distancia recorrida, no necesariamente el parámetro de la curva situado a medio camino entre sus puntos de control. La posición a los dos segundos de nuestra trayectoria cúbica asimétrica quedó ligeramente a la derecha de su cima geométrica.

Ofrece una versión estática útil

El ejemplo empieza con un use estático del emblema, y el movimiento solo comienza al activar el botón Play. Si JavaScript no se ejecuta, la ilustración estática sigue visible. Cuando la preferencia de movimiento reducido está activa, el controlador la mantiene en ese estado.

La característica multimedia prefers-reduced-motion permite que la página responda a la preferencia de movimiento del usuario. Aquí JavaScript lee esa preferencia antes de iniciar el movimiento SVG y restaura la versión estática si la preferencia cambia.

También probamos la rama estática con un interruptor explícito de previsualización de movimiento reducido en el entorno de pruebas: ocultó el grupo animado y mostró el emblema en la posición inicial. Ese interruptor comprobó nuestra lógica alternativa; no cambió el ajuste de accesibilidad del equipo.

Mantén el significado fuera de la animación cuando sea posible. El usuario no debería tener que observar un emblema en movimiento para conocer un estado o leer instrucciones esenciales. Si hay un icono decorativo junto a un texto que ya lo describe, adapta las etiquetas de accesibilidad para evitar anunciar el mismo contenido dos veces.

Prepara tu propio motivo antes de animarlo

Si tu motivo personalizado solo existe como PNG o JPG, PerfectVector puede ayudarte a recuperar una ilustración SVG editable antes de crear el movimiento. Inspecciona la silueta recuperada y los huecos pequeños, agrupa las partes que deben desplazarse juntas y elige el punto de anclaje. PerfectVector proporciona la geometría de origen; la trayectoria, los tiempos y el comportamiento del movimiento se crean por separado.

Un SVG existente puede pasar directamente a la agrupación y la preparación del anclaje. Para flechas sencillas como la de esta demostración, también es práctico dibujar la geometría directamente. La introducción a la vectorización de imágenes explica cuándo resulta útil trazar un original rasterizado.

Si tu marca personalizada solo existe como imagen rasterizada, prueba tu imagen en PerfectVector, comprueba sus contornos y detalles pequeños y después prueba ese SVG al inicio, en el medio y al final de la trayectoria. Conserva una versión estática junto a la animada.

Preguntas frecuentes

¿Por qué mi icono se mueve junto al trazado en lugar de sobre él? La ilustración puede estar desplazada respecto a su origen local. Elige el punto que debe seguir la trayectoria y trasládalo a cero dentro del grupo en movimiento. Comprueba el resultado al inicio y en una curva.

¿La rotación automática cambia la forma del icono? No. El movimiento cambia la posición y la orientación de la ilustración. No transforma la geometría de sus trazados. La dirección de avance del original debe apuntar hacia el eje X positivo para la rotación automática de este ejemplo.

¿Puedo eliminar la línea guía visible? Sí. Conserva la definición de la trayectoria y su ID, pero elimina el elemento independiente que dibuja la línea guía. El movimiento puede seguir haciendo referencia al trazado mediante mpath.

Fuentes

1. MDN animateMotion — Describe las trayectorias de movimiento, los valores de rotación y el movimiento a velocidad uniforme predeterminado.
2. MDN mpath — Explica cómo hacer referencia a una trayectoria existente dentro del elemento de movimiento.
3. Especificación de animación SVG — Define las transformaciones de movimiento y su relación con las coordenadas de la ilustración.
4. Atributo rotate en MDN — Documenta la orientación fija, automática e inversa del movimiento.
5. Preferencia de movimiento reducido en MDN — Explica cómo detectar la preferencia de movimiento del usuario.