Propriété CSS stroke-linecap

La propriété stroke-linecap définit la forme à appliquer aux extrémités ouvertes d'un tracé SVG. Elle modifie uniquement le rendu des deux points d'extrémité d'un chemin ouvert — elle n'a aucun effet sur les angles formés par la jonction de deux segments, ni sur les formes fermées qui ne possèdent pas d'extrémités ouvertes.

Cette page explique l'apparence de chaque valeur de terminaison, la façon dont stroke-linecap interagit avec la spécificité CSS, et le cas particulier du « chemin de longueur nulle » qui permet de dessiner un simple point.

Quand l'utiliser ?

Chaque fois que vous tracez des lignes ou des chemins ouverts en SVG et souhaitez contrôler la façon dont la ligne se termine :

round est le choix le plus courant pour les tracés de style dessiné à la main, les barres de progression et les courbes de graphiques — il donne un rendu doux et soigné.
square est utile lorsque vous souhaitez que la ligne dépasse légèrement son point d'extrémité (par exemple, pour que deux lignes adjacentes se rejoignent parfaitement).
butt (valeur par défaut) coupe la ligne exactement à la coordonnée de fin — à privilégier lorsque la longueur précise est importante.

Une astuce pratique : un chemin de longueur nulle (un tracé qui commence et se termine au même point) s'affiche comme un simple point lorsque stroke-linecap vaut round ou square, et ne s'affiche pas du tout lorsqu'il vaut butt. C'est la méthode standard pour dessiner des points en SVG.

Propriété CSS ou attribut de présentation ?

stroke-linecap est à la fois une propriété CSS et un attribut de présentation SVG. Cela vous offre deux façons de le définir :

En tant qu'attribut sur l'élément : <path stroke-linecap="round" />
En tant que déclaration CSS : path { stroke-linecap: round; }

Un attribut de présentation se comporte comme le style de plus faible priorité ; ainsi, toute règle CSS le remplace. Le style="…" inline et les feuilles de style externes ont la priorité sur l'attribut ; entre les règles CSS, la spécificité normale s'applique.

Info

La propriété stroke-linecap peut être appliquée à n'importe quel élément, mais n'affecte que les éléments de forme et de contenu textuel SVG : <path>, <line>, <polyline>, <text>, <textPath> et <tspan>. Elle n'affecte pas les formes fermées telles que <rect>, <circle> ou <polygon>, car celles-ci ne possèdent pas d'extrémités ouvertes.

Valeur initiale	butt
S'applique à	Formes et éléments de contenu textuel.
Héritage	Oui.
Animatable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.strokeLinecap = "round";

Syntaxe

Syntaxe CSS de stroke-linecap

stroke-linecap: butt | square | round | initial | inherit;

Exemple de la propriété stroke-linecap :

Exemple de code CSS stroke-linecap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez vous-même »

Avec butt, le tracé vert s'arrête exactement aux coordonnées (1,1) et (5,1) — marquées par les points bleus — de sorte que sa longueur visible est égale à la longueur du chemin. Le chemin de longueur nulle en (3,3) ne s'affiche pas du tout.

Résultat

Exemple de la propriété stroke-linecap avec la valeur « round » :

Exemple CSS stroke-linecap avec round

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "round" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
      <!-- Effect of the "round" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
      <!--
      the following pink lines highlight the
      position of the path for each stroke
      -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez vous-même »

Avec round, un demi-cercle de rayon stroke-width / 2 est ajouté au-delà de chaque point d'extrémité, de sorte que la ligne verte dépasse légèrement les points bleus. Le chemin de longueur nulle en (3,3) devient un cercle plein — c'est l'astuce du point en action.

Exemple de la propriété stroke-linecap avec la valeur « square » :

Exemple CSS stroke-linecap avec square

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez vous-même »

square ressemble à round dans le sens où le tracé dépasse le point d'extrémité de stroke-width / 2, mais la terminaison ajoutée est un rectangle plutôt qu'un demi-cercle, ce qui donne un bord plat. Le chemin de longueur nulle en (3,3) s'affiche sous la forme d'un petit carré.

Valeurs

Valeur	Description
`butt`	Par défaut. Termine le tracé à plat, exactement au point d'extrémité, sans aucune extension. Un sous-chemin de longueur nulle n'est pas rendu.
`round`	Ajoute une terminaison semi-circulaire de rayon `stroke-width / 2` au-delà de chaque point d'extrémité, donnant des extrémités arrondies. Un sous-chemin de longueur nulle s'affiche comme un point.
`square`	Ajoute une terminaison rectangulaire qui s'étend de `stroke-width / 2` au-delà de chaque point d'extrémité, donnant des extrémités plates qui dépassent le chemin. Un sous-chemin de longueur nulle s'affiche comme un petit carré.
`initial`	Réinitialise la propriété à sa valeur par défaut (`butt`).
`inherit`	Hérite de la valeur de l'élément parent. `stroke-linecap` est hérité par défaut.

Propriétés associées

stroke-linecap fait partie de plusieurs propriétés de tracé SVG qui contrôlent le rendu des lignes :

stroke — définit la couleur du tracé.
stroke-width — définit l'épaisseur du tracé (et donc la taille des terminaisons).
stroke-dasharray — transforme un tracé continu en tirets ; chaque tiret possède ses propres terminaisons.
stroke-dashoffset — déplace le point de départ du motif de tirets.
fill — définit la couleur utilisée pour peindre l'intérieur d'une forme.

Pratique

Qu'affecte la propriété 'stroke-linecap' en CSS ?

Elle indique la couleur du trait.Elle définit la forme du trait à ses points d'extrémité.Elle définit la largeur du trait.Elle modifie la taille du texte à l'intérieur d'un trait.Elle détermine le style des extrémités de ligne.