animateMotion

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

<?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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
animateMotionChrome Support complet OuiEdge ? Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS Support complet OuiSamsung Internet Android ?
calcModeChrome ? Edge ? Firefox ? IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
keyPointsChrome ? Edge ? Firefox ? IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
originChrome ? Edge ? Firefox ? IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pathChrome ? Edge ? Firefox ? IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rotateChrome ? Edge ? Firefox ? IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi