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>
<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 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.
Compatibilité des navigateurs
BCD tables only load in the browser
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Spécification
Spécification | Statut | Commentaire |
---|---|---|
Scalable Vector Graphics (SVG) 2 La définition de 'stroke-width' 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-width' dans cette spécification. |
Recommendation | Définition initiale pour les formes et le texte |