stroke-width
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'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
<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
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeWidth |
Compatibilité des navigateurs
Chargement…