From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/svg/element/animate/index.html | 109 ++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/fr/web/svg/element/animate/index.html (limited to 'files/fr/web/svg/element/animate') diff --git a/files/fr/web/svg/element/animate/index.html b/files/fr/web/svg/element/animate/index.html new file mode 100644 index 0000000000..0859c08093 --- /dev/null +++ b/files/fr/web/svg/element/animate/index.html @@ -0,0 +1,109 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - Animation SVG + - Element + - SVG +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

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

+ +

{{svginfo}}

+ +

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

+ +

{{EmbedLiveSample("Exemple", 120, 120)}}

+ +

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écificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.elements.animate")}}

-- cgit v1.2.3-54-g00ecf