diff options
author | julieng <julien.gattelier@gmail.com> | 2021-11-01 07:51:45 +0100 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:57:29 +0100 |
commit | 88dda3c00eefc18a29447e99ebd3177925602b52 (patch) | |
tree | a184ddfe3825b6f05cba6d7586ea05c9375558a0 /files/fr/web/svg/element/animate | |
parent | 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a (diff) | |
download | translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.gz translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.tar.bz2 translated-content-88dda3c00eefc18a29447e99ebd3177925602b52.zip |
convert content to md
Diffstat (limited to 'files/fr/web/svg/element/animate')
-rw-r--r-- | files/fr/web/svg/element/animate/index.md | 127 |
1 files changed, 53 insertions, 74 deletions
diff --git a/files/fr/web/svg/element/animate/index.md b/files/fr/web/svg/element/animate/index.md index 49b8564999..da8200952a 100644 --- a/files/fr/web/svg/element/animate/index.md +++ b/files/fr/web/svg/element/animate/index.md @@ -7,101 +7,80 @@ tags: - SVG translation_of: Web/SVG/Element/animate --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément SVG <strong><code><animate></code></strong> 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 <code>href</code> de l'élément.</p> +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. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel">Attributs de traitrement conditionnel</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Événements_d'animation">Attributs d'événement d'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Animation_cible">Attributs cible d'attributs d'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Timing_de_l'animation">Attributs de timing de l'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Valeurs_de_l'animation">Attributs de valeur de l'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Addition_de_l'animation">Attributs d'addition de l'animation</a></li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +- [Attributs de traitrement conditionnel](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel) +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs d'événement d'animation](/fr/docs/Web/SVG/Attribute#Événements_d'animation) +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink) +- [Attributs cible d'attributs d'animation](/fr/docs/Web/SVG/Attribute#Animation_cible) +- [Attributs de timing de l'animation](/fr/docs/Web/SVG/Attribute#Timing_de_l'animation) +- [Attributs de valeur de l'animation](/fr/docs/Web/SVG/Attribute#Valeurs_de_l'animation) +- [Attributs d'addition de l'animation](/fr/docs/Web/SVG/Attribute#Addition_de_l'animation) +- {{SVGAttr("externalResourcesRequired")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("attributeName")}}</li> - <li>{{SVGAttr("attributeType")}}</li> - <li>{{SVGAttr("from")}}</li> - <li>{{SVGAttr("to")}}</li> - <li>{{SVGAttr("dur")}}</li> - <li>{{SVGAttr("repeatCount")}}</li> -</ul> +- {{SVGAttr("attributeName")}} +- {{SVGAttr("attributeType")}} +- {{SVGAttr("from")}} +- {{SVGAttr("to")}} +- {{SVGAttr("dur")}} +- {{SVGAttr("repeatCount")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAnimateElement`](/fr/docs/Web/DOM/SVGAnimateElement). -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[6-7]"><?xml version="1.0"?> -<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" - xmlns="http://www.w3.org/2000/svg"> +```html +<?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></pre> + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" attributeName="x" from="-100" to="120" + dur="10s" repeatCount="indefinite"/> + </rect> +</svg> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p> +{{EmbedLiveSample("Exemple", 120, 120)}} -<h2 id="Problèmes_d'accessibilité">Problèmes d'accessibilité</h2> +## Problèmes d'accessibilité -<p>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.</p> +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. -<p>Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">requête reduced-motion</a> pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations.</p> +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](/fr/docs/Web/CSS/@media/prefers-reduced-motion) pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations. -<ul> - <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> - <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> - <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) +- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) +- [MDN Understanding WCAG, Guideline 2.2 explanations](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content) +- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | +| {{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 | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.animate")}}</p> +{{Compat("svg.elements.animate")}} |