`Stroke-color` - Propriété CSS

stroke-color

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

Description rapide

Définit la couleur des contours en SVG.

Statut

Problèmes de compatibilité ⚠

S'applique à

Formes SVG.

Utilisable sur

SVG

Valeurs prédéfinies

currentcolor

Pourcentages

Ne s'appliquent pas.

Valeur initiale

transparent

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété stroke-color passe progressivement d'une valeur à une autre.

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)

Schéma de la syntaxe de `stroke-color`.

Schéma syntaxique de la propriété stroke-color.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

name est le nom d'une couleur. Voir la liste des couleurs nommées : Nuancier.
#xxxxxx est le code hexadécimal d'une couleur.
color est une couleur définie par l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().
Dans le cas de stroke-color, plusieurs couleurs peuvent être spécifiées, séparées par des virgules.

Description de la propriété `stroke-color`.

Dans le contexte d'une image SVG, la propriété stroke-color définit la couleur de la bordure.

⚠

Cette propriétés est encore en cours de standardisation. Elle est mal prises en charge par les navigateurs. Utilisez plutôt la propriété stroke qui est appelée à devenir une propriété résumée définissant tous les paramètres de la bordure, mais qui, pour le moment, fonctionnent très bien pour fixer les couleurs.

Dans les exemples ci-après, le remplissage est en bleu clair, et la bordure en bleu vif. Remarque : l'épaisseur de la bordure du cercle a été fixée à 10 pixels pour que les deux couleurs soient bien visibles.

fill-color:lightBlue;
stroke-color:blue;

fill-color:lightBlue;
stroke-color:blue;

Chaque couleur est associé à une couche, qui peut comporter également une image (voir la propriété stroke-image). Lorsque une image ET une couleur sont définies pour une couche, la couleur n'est pas représentée sauf si l'image est non trouvée ou incorrecte. Ce qui signifie que, même si l'image comporte des parties transparentes, la couleur ne sera pas visible à travers ces transparences.

Il faut noter également que la valeur de currentColor n'est pas modifiée par stroke-color. Seule la propriété color permet de modifier currentColor.

Consultez aussi les pages sur stroke et fill-color.

Valeurs pour `stroke-color`.

stroke-color: transparent;

transparent est la valeur initiale de stroke-color. Autrement dit, sans indication contraire, les contours sont invisibles.
stroke-color: currentColor;

currentColor est définie par la propriété color. Initialement currentColor vaut black.
stroke-color: #add8e6; stroke-color: lightBlue; stroke-color: rgb(173 216 230);

stroke-color définit la couleur de la bordure. La couleur de remplissage (voir fill-color) s'étend jusqu'au milieu de la bordure. Cela peut être utile à connaître si cette dernière est semi-transparente.

La couleur peut être spécifiée avec n'importe laquelle des syntaxes reconnues par CSS :
- Le code hexadécimal de la couleur.
- Le nom d'une couleur. Voir Nuancier.
- Une couleur spécifiée avec l'une des fonctions suivantes : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().
stroke-color: blue, red, #008000;

En ce qui concerne la bordure, plusieurs couleurs peuvent être spécifiées, séparées par des virgules. Chacune d'elles correspondant à une couche.
stroke-color: initial; (transparent) stroke-color: inherit; stroke-color: revert; stroke-color: revertLayer; stroke-color: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `stroke-color`.

Le simulateur vous permet de jouer avec la couleur du contour, sur une forme géométrique et sur du texte.

stroke-color :

currentcolor

Compatibilité des navigateurs avec `stroke-color`.

La propriété stroke-color est encore en cours de définition. En attendant une meilleure prise en charge, vous pouvez utiliser la propriété stroke pour définir la couleur des contours en SVG.

Colonne 1

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-color

Estimation de la prise en charge globale.

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

Histoire de la propriété `stroke-color`.

Module CSS - Traits et remplissages - Niveau 3

Introduction de la propriété stroke-color regroupée dans la propriété résumée stroke.

13 Avril 2017
Document de travail.

Voir aussi, concernant SVG.

Tous les paramètres concernant le remplissage et les contours sont regroupés dans le module CSS Fill and Stroke Module. La propriété stroke-color fait partie de ces propriétés, ainsi que les propriétés suivantes.