L'élément SVG <animate>
est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut href
de l'élément.
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 SVGAnimateElement
.
Exemple
SVG
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120"
dur="10s" repeatCount="indefinite"/>
</rect>
</svg>
Résultat
Problèmes d'accessibilité
Les animations qui clignotent peuvent être problématiques pour les personnes ayant des problèmes cognitifs tels que le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH). De plus, certains types de mouvements peuvent être un élément déclencheur pour les personnes présentant un risque de troubles vestibulaires, d'épilepsie, de migraine et de sensibilité à la scotopie.
Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la requête reduced-motion pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations.
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
SVG Animations Level 2 La définition de '<animate>' dans cette spécification. |
Brouillon de l'éditeur | Aucun changement |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<animate>' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
BCD tables only load in the browser
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.