stroke-linecap

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.

L'attributstroke-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:<altGlyph>,<path>,<polyline>,<text>,<textPath>,<tref>, et<tspan>

Exemple

html,body,svg {  height: 100%;}

html

<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>

Notes d'usage

Valeur	`butt` \|`round` \|`square`
Valeur par défaut	`butt`
Animation	Oui

butt

La valeurbutt 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

html,body,svg {  height: 100%;}

html

<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>

round

La valeurround 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

html,body,svg {  height: 100%;}

html

<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>

La valeursquare 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

html,body,svg {  height: 100%;}

html

<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>