diff options
Diffstat (limited to 'files/fr/web/svg/attribute/d/index.html')
| -rw-r--r-- | files/fr/web/svg/attribute/d/index.html | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/files/fr/web/svg/attribute/d/index.html b/files/fr/web/svg/attribute/d/index.html index 7aad4f3a04..8593128d7e 100644 --- a/files/fr/web/svg/attribute/d/index.html +++ b/files/fr/web/svg/attribute/d/index.html @@ -10,14 +10,13 @@ translation_of: Web/SVG/Attribute/d <p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p> -<p>La définition d'un tracé est une liste de <a dir="ltr" href="/fr/docs/" id="#Path_commands">commandes de tracé</a> où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p> +<p>La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p> <p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p> -<div id="Example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" @@ -28,7 +27,7 @@ translation_of: Web/SVG/Attribute/d Q 10, 60 10, 30 z" /> </svg></pre> -<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Tracé">Tracé</h2> @@ -53,7 +52,9 @@ translation_of: Web/SVG/Attribute/d <h2 id="glyph">glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +</div> <p>Pour un {{SVGElement('glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> @@ -74,11 +75,15 @@ translation_of: Web/SVG/Attribute/d </tbody> </table> -<p class="note"><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p> +<div class="note"> + <p><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p> +</div> <h2 id="missing-glyph">missing-glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> +</div> <p>Pour un {{SVGElement('missing-glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> @@ -113,9 +118,11 @@ translation_of: Web/SVG/Attribute/d <li>Fermer le chemin (ClosePath)</li> </ul> -<p class="note"><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p> +<div class="note"> + <p><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p> +</div> -<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee; font-size: 13.6px; white-space: nowrap;"><strong> </strong></span></font>négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> +<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code> négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> <h2 id="Moveto_(aller_à)">Moveto (aller à)</h2> @@ -150,21 +157,19 @@ translation_of: Web/SVG/Attribute/d <h2 id="Curveto">Curveto</h2> -<p>L'instruction Curveto trace une <a href="https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths">courbe de Bézier</a>. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p> +<p>L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p> <p>Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est <code>C c1x, c1y c2x, c2y x, y</code> ou <code>c dc1x, dc1y dc2x, dc2y dx, dy</code>.</p> -<div> + <p>Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est <code>T x, y</code> ou <code>t dx, dy</code> pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe <code>S cx, cy x, y</code> ou <code>s dcx,dcy dx,dy</code>, où (d)cx indique le second point de contrôle.</p> <p>Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :</p> -<div class="geckoVersionNote"> <p><code><path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /><br> <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" /></code></p> -</div> <h2 id="Arcto">Arcto</h2> @@ -177,7 +182,6 @@ translation_of: Web/SVG/Attribute/d <h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2> <p>L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").</p> -</div> <h2 id="Éléments">Éléments</h2> @@ -193,4 +197,3 @@ translation_of: Web/SVG/Attribute/d <h2 id="Notes">Notes</h2> <p>Le point d'origine (de coordonnées 0,0) est habituellement le <strong>coin supérieur gauche</strong> du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le <strong>coin inférieur gauche</strong> de la boîte contenant son caractère.</p> -</div> |