animateMotion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné.

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

Attributs globaux

Attributs spécifiques

Interface DOM

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

Exemple

SVG

html

<?xml version="1.0"?>
<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">
  <!-- Dessine le chemin en gris, avec 2 cercles aux extrémités -->
  <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" />
  <circle cx="10" cy="110" r="3" fill="lightgrey" />
  <circle cx="110" cy="10" r="3" fill="lightgrey" />

  <!-- Cercle rouge qui sera déplacé le long du chemin. -->
  <circle cx="" cy="" r="5" fill="red">
    <!-- Définit l'animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath" />
    </animateMotion>
  </circle>
</svg>

Résultat

Spécifications

Specification
SVG Animations Level 2 # AnimateMotionElement

Compatibilité des navigateurs

Voir aussi

<mpath>