Stroke - Propriété CSS

stroke

Résumé des caractéristiques de la propriété `stroke`

Description rapide

Définit les paramètres de la bordure d'une forme en SVG.

Statut

Standard

Utilisable sur

SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Oui.

Type d'animation

Voir les propriétés individuelles.

Module W3C

Module CSS - Traits et remplissages

Références (W3C)

🡇

🡅

CSS Fill and Stroke Module Level 3

Statut du document: WD (document de travail)

Scalable Vector Graphics (SVG)

Statut du document: CR (document candidat à la recommandation)

Scalable Vector Graphics (SVG)

Statut du document: REC (recommandation)

Description de la propriété `stroke`.

⚠

A l'heure actuelle (2024), stroke n'est traitée par les navigateurs que pour définir la couleur du contour

Initialement, la propriété stroke définissait la couleur du contour d'une forme en SVG. Mais le niveau 3 de la spécification CSS Fill and Stroke Module définit stroke comme une propriété résumée regroupant les valeurs des propriétés suivantes :

stroke-color : couleur du contour.
stroke-image : image utiliser pour le remplissage.
stroke-origin : la boîte servant de référence pour positionner l'image.
stroke-position : positionnement de l'image de remplissage.
stroke-repeat : répétition de l'image de remplissage.
stroke-size : dimensions de l'image de remplissage.

Toutes ces propriétés sont impactées par une déclaration de la propriété résumée stroke, même celles dont les valeurs ne seraient pas spécifiées. Les propriétés ignorées sont généralement remises à leur valeur initiale, mais il y a deux exceptions : stroke-color et stroke-origin.

Propriété	Valeur si non spécifiée
`stroke-color`	`transparent`
`stroke-image`	`none` (valeur initiale)
`stroke-origin`	`stroke-box`
`stroke-position`	`0` (valeur initiale)
`stroke-repeat`	`repeat` (valeur initiale)
`stroke-size`	`auto` (valeur initiale)

Sur l'exemple ci-dessous, la couleur de remplissage (définie par la propriété fill ou fill-color) est du vert clair (lightGreen) et la couleur de la bordure est bleu.

Lorsque la bordure est épaisse (sur nos exemple, la bordure a une épaisseur de 10 pixels), elle est dessinée à moitié sur la zone de remplissage de la forme, et à moitié à l'extérieur de la forme. Dans le cas d'une bordure transparente ou en pointillés, ce positionnement de la bordure apparaît clairement.

Prise en charge de `stroke` par les navigateurs.

La propriété stroke est pour le moment très bien reconnue dans sa syntaxe initiale (définition de la couleur). La nouvelle définition (comme une propriété résumée) est encore mal reconnue.

Colonne 1

Prise en charge par les navigateurs de l'ancienne définition de la propriété stroke (définition uniquement de la couleur des bordures en SVG).

Colonne 2

Prise en charge par les navigateurs de la propriété stroke-color. Cette prise en charge sera nécessaire lorsque la propriété stroke sera reconnue comme une propriété résumée.

Propriété
stroke

Propriété
stroke-color

Estimation de la prise en charge globale.

95%

17%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `stroke`.

SVG (Scalable Vector Graphics)

Première définition de la propriété stroke.

30 Octobre 2001
Document de travail.
30 Avril 2002
Candidat à la recommandation.
09 Juin 2011
Proposé à la recommandation.
16 Août 2011
Recommandation.
SVG (Scalable Vector Graphics)

Pas de changement concernant la propriété stroke.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.
Module CSS - Traits et remplissages - Niveau 3

Nouvelle définition de la propriété stroke, comme un propriété résumée.

13 Avril 2017
Document de travail.

Voir aussi, concernant SVG.

Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module. Après avoir fait partie de la spécification SVG11 et SVG2, stroke est maintenant décrit dans ce module, en tant que propriété résumée.