Propriété CSS stroke
Comment utiliser la propriété CSS stroke pour peindre le contour d'un élément SVG. Découvrez les valeurs disponibles avec des exemples.
La propriété CSS stroke peint le contour (la ligne) d'une forme SVG ou d'un morceau de texte. Là où fill colore l'intérieur d'une forme, stroke colore son bord — ensemble, ils contrôlent la façon dont chaque chemin, cercle, rectangle et élément texte SVG est dessiné.
Cette page explique ce que fait stroke, les valeurs qu'il accepte, comment il interagit avec les propriétés de contour associées (largeur, motif de tirets, extrémités de ligne), ainsi que les erreurs courantes à éviter.
Quand l'utiliser ?
stroke n'affecte que le contenu SVG — il n'a aucun effet sur les éléments HTML ordinaires comme <div> ou <p>. Utilisez-le lorsque vous :
- Dessinez des icônes, des graphiques ou des diagrammes en ligne avec
<svg>. - Animez une ligne qui « se dessine elle-même » (combinez
strokeavecstroke-dasharrayetstroke-dashoffset). - Tracez le contour d'un texte SVG sans le remplir.
Vous pouvez trouver les couleurs web nommées dans la section couleurs HTML.
Propriété CSS vs attribut de présentation
stroke est particulier : vous pouvez le définir soit comme propriété CSS, soit comme attribut de présentation SVG écrit directement sur l'élément. Ces deux lignes produisent le même résultat :
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Lorsque les deux sont présents, CSS l'emporte : un style en ligne (ou toute règle de feuille de style) remplace l'attribut de présentation. Cela vous permet de définir une couleur par défaut dans le balisage et de la remplacer depuis CSS — par exemple, au survol.
La propriété stroke peut être utilisée à la fois comme propriété CSS et comme attribut de présentation. Elle peut être appliquée à 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>.
| Valeur initiale | none |
|---|---|
| S'applique à | Formes et éléments de contenu textuel. |
| Héritée | Oui. |
| Animable | Non. |
| Version | SVG 1.1 Specification |
| Syntaxe DOM | Object.stroke = "#1c87c9"; |
Syntaxe
Syntaxe CSS stroke
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Exemple de la propriété stroke :
Exemple de code CSS stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Résultat
Exemple avec des formes et CSS
Vous n'avez pas à écrire stroke comme attribut — ici, il est défini dans un bloc <style> et appliqué à plusieurs formes à la fois. Notez fill: none pour n'afficher que le contour :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| none | Aucune peinture n'est appliquée. |
| color | Définit une couleur unie. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. |
| url | Une référence URL vers un élément de serveur de peinture définissant un serveur de peinture. |
| context-fill | Utilise la valeur de fill provenant d'un élément de contexte. |
| context-stroke | Utilise la valeur de stroke provenant d'un élément de contexte. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
La valeur initiale est none, ce qui signifie qu'une forme sans stroke est dessinée sans contour du tout — même si stroke-width est défini.
Propriétés stroke associées
stroke ne définit que la couleur du contour. Pour contrôler l'apparence de ce contour, combinez-le avec :
stroke-width— l'épaisseur de la ligne.stroke-dasharray— un motif de tirets/espaces à la place d'une ligne pleine.stroke-dashoffset— le point de départ du motif de tirets (la clé des animations de tracé de ligne).stroke-linecap— la forme des extrémités de la ligne.
Erreurs courantes
- Rien n'apparaît. Si
stroke-widthest à0(valeur par défaut), le contour est invisible quelle que soit la couleur choisie. Pensez toujours à définir une largeur. - La forme est pleine. Si vous souhaitez uniquement le contour, définissez
fill: none— sinon l'intérieur est peint en noir par défaut. - Cela ne fonctionne pas sur un
<div>.stroken'a d'effet que sur les graphiques SVG et les éléments texte :<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>et<tspan>.