SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <animateMotion> permite definir cómo se mueve un elemento a lo largo de una ruta de movimiento.
Sintaxis:
<animateMotion values="" dur="" repeatCount="" path="" />
Atributos:
- keyPoints: este atributo indica en el rango [0, 1], qué tan lejos está el objeto a lo largo de la ruta para cada valor asociado a keyTimes.
- ruta: este atributo define la ruta del movimiento.
- rotar: este atributo define una rotación aplicada al elemento animado a lo largo de una ruta, generalmente para que apunte en la dirección de la animación.
- Atributos de animación: atributos utilizados para dar efectos de animación, atributos de tiempo de exposición, atributos de eventos y atributos de valor, etc.
- Atributos globales: algunos atributos globales utilizados como atributos centrales y atributos de estilo, etc.
Ejemplo:
<!DOCTYPE html> <html> <body> <svg width="1200" height="1200"> <circle cx="60" cy="60" r="5" fill="green"> <animateMotion dur="10s" repeatCount="indefinite" path="M20, 60 C20, -50 180, 150 180, 60 C180-60 20, 150 20, 60 z" /> </circle> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Borde
- Firefox
- Safari
- Ópera