Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

stroke-width

L'attribut stroke-width définit l'épaisseur du contour à appliquer à une forme SVG.

Note : stroke-width é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>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, et <tspan>

Exemple

html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Épaisseur par défaut: 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- Définit l'épaisseur avec un nombre -->
  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />

  <!-- Définit l'épaisseur avec un pourcentage -->
  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>

Notes d'usage

Valeur <length> | <percentage>
Valeur par défaut 1px
Animation Oui

Note : SVG2 introduit les valeurs en pourcentage pour stroke-width, Cependant, ce n'est pas souvent pris en charge pour le moment (voir la section Compatibilité des navigateurs ci-dessous). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle [0-1].

Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale viewBox normalisée.

Spécifications

This feature does not appear to be defined in any specification.

Compatibilité des navigateurs