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

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

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>

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>

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-linecap' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et le texte
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'stroke-linecap' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,