Propriété CSS stroke-width

La propriété CSS stroke-width définit l'épaisseur du contour (le « trait ») tracé autour d'une forme SVG ou d'un texte. Le trait est la ligne peinte qui suit le chemin de la forme ; stroke-width contrôle l'épaisseur de cette ligne.

Cette page couvre la syntaxe, les valeurs acceptées (longueurs et pourcentages), la façon dont stroke-width interagit avec les attributs de présentation SVG, ainsi que les pièges liés aux unités et à la mise à l'échelle du viewBox.

Pourquoi utiliser stroke-width

En SVG, le contour d'une forme et son intérieur sont peints séparément : la propriété stroke peint le contour et fill peint l'intérieur. Un trait n'est visible que s'il a une largeur non nulle, c'est pourquoi stroke-width est ce qui fait apparaître réellement un contour. Utilisez-la pour rendre les bordures plus épaisses ou plus fines, pour tracer des grilles en filigrane, ou pour créer des icônes et du texte avec un contour prononcé.

stroke-width et l'attribut SVG

Vous pouvez définir la largeur du trait de deux façons : en tant qu'attribut de présentation SVG dans le balisage (stroke-width="3") ou en tant que propriété CSS. Lorsque les deux sont présents, le CSS l'emporte — une règle CSS (ou un style en ligne) a la priorité sur l'attribut de présentation. C'est la raison habituelle pour laquelle une valeur définie dans le balisage SVG semble être « ignorée » : une feuille de style la remplace.

<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />

Info

stroke-width est un attribut de présentation et peut être appliqué à n'importe quel élément, mais n'a d'effet que sur les éléments suivants : <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, et <tspan>.

Info

Des unités comme px ou em sont requises, sauf lorsque la valeur est 0.

Valeur initiale	1
S'applique à	Les formes et les éléments de contenu textuel.
Héritée	Oui.
Animable	Oui.
Version	Spécification SVG 1.1
Syntaxe DOM	Object.strokeWidth = "0.5";

Syntaxe

stroke-width: length | percentage | initial | inherit;

La largeur est centrée sur le chemin : la moitié est peinte à l'intérieur du bord de la forme et l'autre moitié à l'extérieur. Ainsi, un stroke-width de 4 sur un cercle de rayon 3 ajoute 2 unités au-delà du rayon et chevauche 2 unités vers l'intérieur.

Exemple de la propriété stroke-width :

Exemple de code CSS stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
    </svg>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété stroke-width avec la valeur "length" :

Autre exemple de code CSS stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
    </svg>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété stroke-width avec la valeur "%" :

Un pourcentage est résolu par rapport à la diagonale du SVG — plus précisément la diagonale du viewport (sqrt(width² + height²) / sqrt(2)), et non par rapport à la taille propre de la forme. Cela rend les largeurs en pourcentage pratiques lorsque vous souhaitez que le trait s'adapte à l'échelle du dessin.

Exemple de valeur en pourcentage pour CSS stroke-width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
    </svg>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
length	Spécifie la largeur du trait.
percentage	Spécifie la largeur du trait en %.
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite de la propriété depuis son élément parent.

Notes et pièges

Une largeur nulle masque le trait. stroke-width: 0 ne dessine rien, même si une couleur stroke est définie.
Les unités sont requises pour les valeurs CSS non nulles. Dans un style ou une feuille de style, utilisez 2px, 0.5em, etc. La forme numérique brute (stroke-width="3") n'est valide qu'en tant qu'attribut SVG, où le nombre est interprété en unités d'espace utilisateur.
Le trait chevauche le chemin. Comme la moitié de la largeur se situe à l'extérieur du bord de la forme, un trait épais peut déborder au-delà du viewBox et être rogné. Ajoutez une marge au viewBox si votre contour est coupé.
Il s'adapte à l'échelle du viewBox. Un stroke-width exprimé en unités utilisateur s'agrandit et rétrécit lorsque le SVG est redimensionné pour s'adapter à son conteneur. Pour conserver une épaisseur constante à l'écran quelle que soit la mise à l'échelle, ajoutez l'attribut SVG vector-effect="non-scaling-stroke" à l'élément.

Propriétés associées

stroke — la couleur (peinture) du contour.
stroke-linecap — la forme des extrémités de chemin ouvert.
stroke-dasharray — transforme le trait en ligne pointillée.
stroke-dashoffset — décale le point de départ du motif de tirets.
fill — la couleur de l'intérieur d'une forme.

Pratique

Que fait la propriété CSS 'stroke-width' ?

Elle définit la largeur de la bordure d'un élément.Elle détermine l'épaisseur du contour d'un élément.Elle définit la largeur du trait (contour) d'un élément SVG.Elle contrôle la largeur du rembourrage d'un élément.