From 88dda3c00eefc18a29447e99ebd3177925602b52 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:45 +0100 Subject: convert content to md --- files/fr/web/svg/element/mpath/index.md | 136 +++++++++++++------------------- 1 file changed, 57 insertions(+), 79 deletions(-) (limited to 'files/fr/web/svg/element/mpath') diff --git a/files/fr/web/svg/element/mpath/index.md b/files/fr/web/svg/element/mpath/index.md index ced9f15518..ad95906c77 100644 --- a/files/fr/web/svg/element/mpath/index.md +++ b/files/fr/web/svg/element/mpath/index.md @@ -7,100 +7,78 @@ tags: - SVG Animation translation_of: Web/SVG/Element/mpath --- -
{{SVGRef}}
+{{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.

+L'élément **``** 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

+## Contexte d'utilisation -

{{svginfo}}

+{{svginfo}} -

Attributs

+## Attributs -

Attributs globaux

+### Attributs globaux - +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink "en/SVG/Attribute#XLink") +- {{SVGAttr("externalResourcesRequired")}} -

Attributs spécifiques

+### Attributs spécifiques - +- {{SVGAttr("xlink:href")}} -

Interface DOM

+## Interface DOM -

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

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

Exemple

+## Exemple -

SVG

+### SVG -
<svg width="100%" height="100%"  viewBox="0 0 500 300"
+```html
+
 
-  <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.
+  
+  
+    
+    
+       
+    
+  
+
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemple", 250, 165)}}
+
+## Spécifications
+
+| Spécification                                                                                | Statut                                   | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{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