Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<mpath>
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2018.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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'interfaceSVGMPathElement.
Exemple
SVG
html
<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 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
| Specification |
|---|
| SVG Animations Level 2 # MPathElement |