diff options
Diffstat (limited to 'files/fr/web/svg/element/mpath')
| -rw-r--r-- | files/fr/web/svg/element/mpath/index.md | 136 |
1 files changed, 57 insertions, 79 deletions
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 --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><mpath></code></strong> 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.</p> +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. -<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_base" title="en/SVG/Attribute#Core">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a></li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +- [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")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> +- {{SVGAttr("xlink:href")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGMPathElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[23]"><svg width="100%" height="100%" viewBox="0 0 500 300" +```html +<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" > + xmlns:xlink="http://www.w3.org/1999/xlink" > - <rect x="1" y="1" width="498" height="298" - fill="none" stroke="blue" stroke-width="2" /> + <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" /> + <!-- 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. + <!-- 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> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 250, 165)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<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", "#MPathElement", "<mpath>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.mpath")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("animateMotion")}}</li> -</ul> + 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é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")}} |