<animate>

Exemple

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

Attributs

Attributs d'animation

• Attribut pour le minutage d'une animation
  • begin
  • dur
  • end
  • min
  • max
  • restart
  • repeatCount
  • repeatDur
  • fill
• Attributs de valeur pour une animation
  • calcMode
  • values
  • keyTimes
  • keySplines
  • from
  • to
  • by
• Autres attributs relatifs aux animations
  • attributeName
  • additive
  • accumulate
• Attributs pour les évènements relatifs aux animations
  • onbegin
  • onend
  • onrepeat

Attributs universels

• Attributs fondamentaux
  • id
• Attributs de mise en forme
  • class
  • style
• Attributs relatifs aux évènements
  • Attributs pour les évènements universels
  • Attributs pour les évènements des éléments du document

Notes d'utilisation

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

Accessibilité

Les animations de clignotement ou de flash peuvent être problématiques pour les personnes avec des troubles de l'attention. De plus, certains types de mouvement peuvent déclencher des troubles vestibulaires, des crises d'épilepsie, des migraines ou une sensibilité scotopique.

Veillez à fournir un mécanisme pour suspendre ou désactiver les animations, par exemple en utilisant la caractéristique média @prefers-reduced-motion pour proposer une expérience alternative aux personnes qui ont exprimé une préférence pour l'absence d'animations.

• Concevoir des animations web plus sûres, tenant compte de la sensibilité aux mouvements, un article A List Apart (en anglais)
• Une introduction aux requêtes média pour la réduction des mouvements sur CSS-Tricks (en anglais)
• Conception adaptative et gestion du mouvement sur le blog WebKit (en anglais)
• Guide MDN pour la compréhension de la règle 2.2 du WCAG
• Comprendre le critère de réussite 2.2.2, un guide du W3C pour la compréhension de WCAG 2.0 (en anglais)

Spécifications

Compatibilité des navigateurs