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/mpath/index.html | 106 ------------------------------ files/fr/web/svg/element/mpath/index.md | 106 ++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 files/fr/web/svg/element/mpath/index.html create mode 100644 files/fr/web/svg/element/mpath/index.md (limited to 'files/fr/web/svg/element/mpath') diff --git a/files/fr/web/svg/element/mpath/index.html b/files/fr/web/svg/element/mpath/index.html deleted file mode 100644 index ced9f15518..0000000000 --- a/files/fr/web/svg/element/mpath/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: -slug: Web/SVG/Element/mpath -tags: - - Element - - SVG - - SVG Animation -translation_of: Web/SVG/Element/mpath ---- -
{{SVGRef}}
- -

L'élément <mpath> se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation.

- -

Contexte d'utilisation

- -

{{svginfo}}

- -

Attributs

- -

Attributs globaux

- - - -

Attributs spécifiques

- - - -

Interface DOM

- -

Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.

- -

Exemple

- -

SVG

- -
<svg width="100%" height="100%"  viewBox="0 0 500 300"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink" >
-
-  <rect x="1" y="1" width="498" height="298"
-        fill="none" stroke="blue" stroke-width="2" />
-
-  <!-- Affiche le chemin en bleu avec trois cercles
-       au début, au milieu et à la fin du chemin -->
-  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
-        fill="none" stroke="blue" stroke-width="7.06"  />
-  <circle cx="100" cy="250" r="17.64" fill="blue"  />
-  <circle cx="250" cy="100" r="17.64" fill="blue"  />
-  <circle cx="400" cy="250" r="17.64" fill="blue"  />
-
-  <!-- Triangle qui sera déplacé le long du chemin.
-       Il est définit avec une orientation verticale, la base du triangle
-       est centrée horizontalement juste au-dessus de l'origine. -->
-  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
-        fill="yellow" stroke="red" stroke-width="7.06"  >
-    <!-- Référence le path à utiliser -->
-    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
-       <mpath xlink:href="#path1"/>
-    </animateMotion>
-  </path>
-</svg>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple", 250, 165)}}

- -

Spécifications

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

Compatibilité des navigateurs

- -

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

- -

Voir aussi

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

L'élément <mpath> se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation.

+ +

Contexte d'utilisation

+ +

{{svginfo}}

+ +

Attributs

+ +

Attributs globaux

+ + + +

Attributs spécifiques

+ +
    +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

Interface DOM

+ +

Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.

+ +

Exemple

+ +

SVG

+ +
<svg width="100%" height="100%"  viewBox="0 0 500 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+  <rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <!-- Affiche le chemin en bleu avec trois cercles
+       au début, au milieu et à la fin du chemin -->
+  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  />
+  <circle cx="100" cy="250" r="17.64" fill="blue"  />
+  <circle cx="250" cy="100" r="17.64" fill="blue"  />
+  <circle cx="400" cy="250" r="17.64" fill="blue"  />
+
+  <!-- Triangle qui sera déplacé le long du chemin.
+       Il est définit avec une orientation verticale, la base du triangle
+       est centrée horizontalement juste au-dessus de l'origine. -->
+  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  >
+    <!-- Référence le path à utiliser -->
+    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+       <mpath xlink:href="#path1"/>
+    </animateMotion>
+  </path>
+</svg>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 250, 165)}}

+ +

Spécifications

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

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ +
    +
  • {{SVGElement("animateMotion")}}
    • +
-- cgit v1.2.3-54-g00ecf