From e7f1d07cba1f78b72eb43bfcdabc262359c4991a Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 1 Nov 2021 07:45:47 +0100 Subject: Prepare SVG section for Markdown conversion (#2570) * Remove summary classes * Remove hidden classes out of pre * Remove spans * Remove notranslate class * Remove ids out of headings * missed 2 ids with regex * clean note and warning cards * fix headings errors * Fix dls and as * fix imgs * lint stuff (absolute urls, english links) * Temporarily readding file * delete inexisting doc in en-US with flaws * Fixes #2842 for SVG --- files/fr/web/svg/tutorial/paths/index.html | 43 +++++++++++++++--------------- 1 file changed, 21 insertions(+), 22 deletions(-) (limited to 'files/fr/web/svg/tutorial/paths/index.html') diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html index c006452033..e0160782bb 100644 --- a/files/fr/web/svg/tutorial/paths/index.html +++ b/files/fr/web/svg/tutorial/paths/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Paths ---

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

-

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

+

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.

@@ -38,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Paths

Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:

-

+

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 10"/>
@@ -60,9 +60,9 @@ original_slug: Web/SVG/Tutoriel/Paths
 V y (ou v dy)
-

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

+

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

-

+

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
@@ -101,7 +101,7 @@ V y (ou v dy)
 
 
Commandes pour les courbes

 
-
Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

+
Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

 
 
Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path: l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

 
@@ -116,7 +116,7 @@ V y (ou v dy)
 
 
Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

 
-
Cubic Bézier Curves with grid

+

 
 
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
@@ -151,7 +151,7 @@ V y (ou v dy)
 
 
Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

 
-
ShortCut_Cubic_Bezier_with_grid.png

+

 
 
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
@@ -166,7 +166,8 @@ V y (ou v dy)
 
 
(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.

 
-
Quadratic Bézier with grid

+
courbe de Bézier quadratique avec une grille

+
 
 
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
@@ -182,10 +183,11 @@ V y (ou v dy)
 
Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.

 
 

-
Note: Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

+  
Note : Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

 

 
-
Shortcut_Quadratic_Bezier_with_grid.png

+

+
 
 
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
   <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
@@ -193,7 +195,7 @@ V y (ou v dy)
 
 
Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

 
-
Elliptical Arc

+
Elliptical Arc

 
 
Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A (Elliptical Arc). Les arcs sont des sections de cercles ou d’ellipses.

 
@@ -207,7 +209,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
 
 
x-axis-rotation décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:

 
-
SVGArcs_XAxisRotation_with_grid

+
SVGArcs_XAxisRotation_with_grid

 
 
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
   <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" />
@@ -238,10 +240,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
       stroke="blue" stroke-width="6" fill="none" />
 

 
-
 
-
{{ EmbedLiveSample('Playable_code', '100%', 200) }}

+
{{ EmbedLiveSample('exemple_jouable', '100%', 200) }}

 
 
large-arc-flag

 
@@ -279,10 +280,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
       stroke="blue" stroke-width="6" fill="none" />
 

 
-
 
-
{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}

+
{{ EmbedLiveSample('code_jouable_2', '100%', 200) }}

 
 
L’exemple ci-dessous montre les quatre combinaisons possibles avec sweep-flag et large-arc-flag:

 
-

+

 
 
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
   <path d="M80 80
-- 
cgit v1.2.3-54-g00ecf