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

L'attribut stroke-linecap définit la forme de la fin des lignes SVG.

- -
-

Note : stroke-linecap étant un attribut de présentation, il peut être utilisé comme propriété CSS.

-
- -

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

- -

Exemple

- - - -
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
-
-  <!-- Effet de la valeur "butt" (valeur par défaut) -->
-  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
-        stroke-linecap="butt" />
-
-  <!-- Effet de la valeur "round" -->
-  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
-        stroke-linecap="round" />
-
-  <!-- Effet de la valeur "square" -->
-  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
-        stroke-linecap="square" />
-
-  <!--
-  Les lignes roses indiquent la position
-  du chemin pour chaque trait
-  -->
-  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
-</svg>
-
- -

{{EmbedLiveSample('exemple', '100%', 200)}}

- -

Notes d'usage

- - - - - - - - - - - - - - - - -
Valeurbutt | round | square
Valeur par défautbutt
AnimationOui
- -

butt

- -

La valeur butt indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.

- -

Exemple

- - - -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
-
-  <!-- Effet de la valeur "butt" -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="butt" />
-
-  <!-- Effet de la valeur "butt" sur un chemin de longueur zéro -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="butt" />
-
-
-  <!--
-  Lignes roses pour indiquer la position
-  du chemin pour chaque trait
-  -->
-  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
-  <circle cx="1" cy="1" r="0.05" fill="pink" />
-  <circle cx="5" cy="1" r="0.05" fill="pink" />
-  <circle cx="3" cy="3" r="0.05" fill="pink" />
-</svg>
-
- -

{{EmbedLiveSample('butt', '100%', 200)}}

- -

round

- -

La valeur round indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.

- -

Exemple

- - - -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
-
-  <!-- Effet de la valeur "round" -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="round" />
-
-  <!-- Effet de la valeur "round" sur un chemin de longueur zéro -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="round" />
-
-
-  <!--
-  Lignes roses pour indiquer la position
-  du chemin pour chaque trait
-  -->
-  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
-  <circle cx="1" cy="1" r="0.05" fill="pink" />
-  <circle cx="5" cy="1" r="0.05" fill="pink" />
-  <circle cx="3" cy="3" r="0.05" fill="pink" />
-</svg>
-
- -

{{EmbedLiveSample('round', '100%', 200)}}

- -

square

- -

La valeur square indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.

- -

Exemple

- - - -
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
-
-  <!-- Effet de la valeur "square" -->
-  <path d="M1,1 h4" stroke="black"
-        stroke-linecap="square" />
-
-  <!-- Effet de la valeur "square" sur un chemin de longueur zéro -->
-  <path d="M3,3 h0" stroke="black"
-        stroke-linecap="square" />
-
-  <!--
-  Les lignes roses indiquent la position
-  du chemin pour chaque trait
-  -->
-  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
-  <circle cx="1" cy="1" r="0.05" fill="pink" />
-  <circle cx="5" cy="1" r="0.05" fill="pink" />
-  <circle cx="3" cy="3" r="0.05" fill="pink" />
-</svg>
-
- -

{{EmbedLiveSample('square', '100%', 200)}}

- -

Compatibilité des navigateurs

- -

{{Compat("svg.attributes.presentation.stroke-linecap")}}

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md new file mode 100644 index 0000000000..d8b46b8472 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-linecap/index.md @@ -0,0 +1,187 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-linecap +--- +
{{SVGRef}}
+ +

L'attribut stroke-linecap définit la forme de la fin des lignes SVG.

+ +
+

Note : stroke-linecap étant un attribut de présentation, il peut être utilisé comme propriété CSS.

+
+ +

Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "butt" (valeur par défaut) -->
+  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effet de la valeur "round" -->
+  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effet de la valeur "square" -->
+  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" />
+
+  <!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
+</svg>
+
+ +

{{EmbedLiveSample('exemple', '100%', 200)}}

+ +

Notes d'usage

+ + + + + + + + + + + + + + + + +
Valeurbutt | round | square
Valeur par défautbutt
AnimationOui
+ +

butt

+ +

La valeur butt indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "butt" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effet de la valeur "butt" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" />
+
+
+  <!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('butt', '100%', 200)}}

+ +

round

+ +

La valeur round indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "round" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effet de la valeur "round" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" />
+
+
+  <!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('round', '100%', 200)}}

+ +

square

+ +

La valeur square indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.

+ +

Exemple

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effet de la valeur "square" -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" />
+
+  <!-- Effet de la valeur "square" sur un chemin de longueur zéro -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" />
+
+  <!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

{{EmbedLiveSample('square', '100%', 200)}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("svg.attributes.presentation.stroke-linecap")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG2")}}Définition pour les formes et le texte
{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et le texte
-- cgit v1.2.3-54-g00ecf