Propriété CSS stroke-width
La propriété CSS stroke-width spécifie la largeur du trait sur l'élément.
CSS stroke-width remplace l'attribut de présentation SVG. Par exemple, une règle CSS prendra le pas sur stroke-width="3" dans le balisage. Les styles en ligne remplacent également les attributs de présentation.
INFO
La propriété stroke-width est un attribut de présentation et peut être appliquée à n'importe quel élément, mais elle n'aura d'effet que sur les éléments suivants : <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> et <tspan>.
INFO
Les unités comme px ou em sont requises, sauf lorsque la valeur est 0.
| Valeur initiale | 1 |
|---|---|
| S'applique à | Formes et éléments de contenu textuel. |
| Héritée | Oui. |
| Animable | Oui. |
| Version | Spécification SVG 1.1 |
| Syntaxe DOM | Object.strokeWidth = "0.5"; |
Syntaxe
Syntaxe CSS de stroke-width
stroke-width: length | percentage | initial | inherit;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>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>Exemple de la propriété stroke-width avec la valeur "%" :
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>Valeurs
| Valeur | Description |
|---|---|
| length | Spécifie la largeur du trait. |
| percentage | Spécifie la largeur du trait en %. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'stroke-width' ?