From 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:27 +0100 Subject: move *.html to *.md --- files/fr/web/svg/element/animatemotion/index.html | 109 ---------------------- files/fr/web/svg/element/animatemotion/index.md | 109 ++++++++++++++++++++++ 2 files changed, 109 insertions(+), 109 deletions(-) delete mode 100644 files/fr/web/svg/element/animatemotion/index.html create mode 100644 files/fr/web/svg/element/animatemotion/index.md (limited to 'files/fr/web/svg/element/animatemotion') diff --git a/files/fr/web/svg/element/animatemotion/index.html b/files/fr/web/svg/element/animatemotion/index.html deleted file mode 100644 index d5bc8130ca..0000000000 --- a/files/fr/web/svg/element/animatemotion/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: animateMotion -slug: Web/SVG/Element/animateMotion -tags: - - Animation SVG - - Element - - SVG -translation_of: Web/SVG/Element/animateMotion ---- -
{{SVGRef}}
- -

L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné.

- -

Contexte d'utilisation

- -

{{svginfo}}

- -

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

- -

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

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/svg/element/animatemotion/index.md b/files/fr/web/svg/element/animatemotion/index.md new file mode 100644 index 0000000000..d5bc8130ca --- /dev/null +++ b/files/fr/web/svg/element/animatemotion/index.md @@ -0,0 +1,109 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Animation SVG + - Element + - SVG +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

L'élément <animateMotion> permet d'animer un élément le long d'un chemin donné.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

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

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Aucun changement
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf