<animateMotion>

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

Voir la compatibilité complète
En savoir plus

L'élément SVG <animateMotion> fournit un moyen de définir comment un élément se déplace le long d'un chemin de mouvement.

Note : Pour réutiliser un chemin existant, il est nécessaire d'utiliser un élément <mpath> à l'intérieur de l'élément <animateMotion> au lieu de l'attribut path.

Contexte d'utilisation

Catégories	Élément d'animation
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments descriptifs `<mpath>`

Attributs

keyPoints: Cet attribut indique, dans la plage [0,1], à quel point l'objet se trouve le long du chemin pour chaque valeur associée dans keyTimes. Type de valeur : <number>* ; Valeur par défaut : aucune ; Peut être animé : non
path: Cet attribut définit le chemin du mouvement, en utilisant la même syntaxe que l'attribut d. Type de valeur : <string> ; Valeur par défaut : aucune ; Peut être animé : non
rotate: Cet attribut définit une rotation appliquée à l'élément animé le long d'un chemin, généralement pour le faire pointer dans la direction de l'animation. Type de valeur : <number> | auto | auto-reverse ; Valeur par défaut : 0 ; Peut être animé : non

Note : Pour <animateMotion>, la valeur par défaut de l'attribut calcMode est paced.

Attributs d'animation

Les attributs de minutage d'animation: begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
Les attributs de valeur d'animation: calcMode, values, keyTimes, keySplines, from, to, by
Autres attributs d'animation: Les plus notables : attributeName, additive, accumulate
Les attributs d'évènements d'animation: Les plus notables : onbegin, onend, onrepeat

Interface DOM

Cet élément implémente l'interface SVGAnimateMotionElement.

Exemples

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

Spécifications

Spécification
SVG Animations Level 2 # AnimateMotionElement

Compatibilité des navigateurs

Voir aussi

L'élément <mpath>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 23 sept. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu