<mpath>

L'élément <mpath> se place dans un élément <animateMotion>, il permet de référencer un élément <path> pour définir le chemin utilisé par l'animation.

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

Attributs

Attributs globaux

Attributs spécifiques

Interface DOM

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

Exemple

SVG

<svg width="100%" height="100%"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <!-- Affiche le chemin en bleu avec trois cercles
       au début, au milieu et à la fin du chemin -->
  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />

  <!-- Triangle qui sera déplacé le long du chemin.
       Il est définit avec une orientation verticale, la base du triangle
       est centrée horizontalement juste au-dessus de l'origine. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <!-- Référence le path à utiliser -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

Résultat

Spécifications

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi