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 à traitement conditionnel »
- Attributs fondamentaux »
- Attributs d'événements d'animation »
- Attributs XLink »
- Attributs d'animation de timing »
- Attributs d'animation de valeurs »
- Attributs d'animation d'ajout »
externalResourcesRequired
Attributs spécifiques
Interface DOM
Cet élément implémente l'interface SVGAnimateMotionElement
.
Exemple
SVG
<?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
Spécification | Statut | Commentaire |
---|---|---|
SVG Animations Level 2 La définition de '<animateMotion>' dans cette spécification. |
Brouillon de l'éditeur | Aucun changement |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<animateMotion>' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet Oui | Edge ? | Firefox Support complet Oui | IE Aucun support Non | Opera Support complet Oui | Safari Support complet Oui | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS Support complet Oui | Samsung Internet Android ? |
calcMode | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
path | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
keyPoints | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rotate | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
origin | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue