Stroke-width - Propriété CSS

stroke-width

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

Description rapide
Définit l'épaisseur des tracés en SVG.
Statut
Standard
Utilisable sur
SVG
Pourcentages
Calculés par rapport à la moyenne largeur-hauteur du viewport SVG.
Valeur initiale
1px
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété stroke-width passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Traits et remplissages
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

Description de la propriété stroke-width.

stroke-width définit l'épaisseur des tracés (lignes, bordures...) d'une forme SVG.

Valeurs pour stroke-width.

  • stroke-width: 5px;

    La valeur doit être positive ou nulle, et suivie d'une des unités de dimension. La largeur de la bordure est fixée à la valeur indiquée.

    S'il s'agit d'un pourcentage il est calculé par rapport à la moyenne de la largeur et de la hauteur du viewport.
    Dans l'exemple ci-dessous, le viewport mesure 280 pixels de large et 100 pixels de haut, ce qui correspond à une moyenne largeur-hauteur de 190 pixels. L'épaisseur du trait fixée à 10% correspond donc à 19 pixels, comme le montre la comparaison des deux lignes.

    SVG
    280 100 10% 19px

Valeurs communes à toutes les propriétés :

stroke-width: initial (1px) stroke-width: inherit stroke-width: revert stroke-width: revertLayer stroke-width: unset

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

Animation de la propriété stroke-width.

L'animation de stroke-width est très fluide, comme toutes les propriétés dont la valeur est une dimension.

SVG

Exemple interactif avec la propriété stroke-width.

stroke-width :
SVG

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge par les navigateurs de la possibilité de gérer l'épaisseur des traits dans une image SVG (propriété stroke-width).
1
Propriété
stroke-width
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

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

Historique de la propriété stroke-width.

  • SVG (Scalable Vector Graphics)

    Première disposition de cette propriété stroke-wdth.
    WD
    30 Octobre 2001
    Document de travail.
    CR
    30 Avril 2002
    Candidat à la recommandation.
    PR
    09 Juin 2011
    Proposé à la recommandation.
    REC
    16 Août 2011
    Recommandation.

  • SVG (Scalable Vector Graphics)

    Pas de changement concernant la description de cette propriété stroke-width.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Traits et remplissages - Niveau 3

    Pas de changement concernant la propriété stroke-width.
    WD
    13 Avril 2017
    Document de travail.
    CR
    PR
    REC

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-width est maintenant décrit dans ce module.

Propriétés :

⚠
fill
Définit l'ensemble des paramètres de remplissage d'une forme (couleur, etc).
⚠
fill-break
Définit comment le navigateur gère les ruptures dans cet élément (saut de page par exemple).
⚠
fill-color
Définit la couleur des remplissages en SVG.
⚠
fill-image
Définit la ou les images de remplissage. Cela peut être aussi des dégradés de couleur.
fill-opacity
Définit l'opcaité (la transparence) du remplissage d'une forme en SVG.
⚠
fill-origin
Définit la boîte qui sert de référence pour le positionnement des remplissages (images ou dégradés).
⚠
fill-position
Définit la position du remplissage, en accord avec la propriété fill-origin.
⚠
fill-repeat
Détermine comment est répétée l'image de remplissage dans une forme SVG.
fill-rule
Définit comment doit se faire le remplissage d'une forme comportant un trou, ou dont le contour se recoupe lui-même.
⚠
fill-size
Détermine les dimensions de l'image o du dégradé de remplissage sur une forme SVG.
paint-order
Définit l'ordre de dessin des différentes parties d'une forme (contour, remplissage, marqueurs).
stroke
Définit les paramètres de la bordure d'une forme en SVG.
stroke-align
Définit comment se positionne le trait de bordure par rapport aux limites de la forme, en SVG.
⚠
stroke-break
Définit comment sont coupées les bordures dans le cas d'une fragmentation.
⚠
stroke-color
Définit la couleur des contours en SVG.
⚠
stroke-dash-corner
Définit comment gérer les pointillés dans les angles du contour (SVG).
⚠
stroke-dash-justify
Définit l'ajustement des pointillés pour qu'un nombnre entier de segments soit compris dans le tracé (SVG).
stroke-dasharray
Définit les caractéristiques d'un pointillé (en SVG).
stroke-dashoffset
Définit le point de départ des pointillés sur un contour SVG.
stroke-linecap
Définit la forme des embouts de lignes (en SVG).
stroke-linejoin
Définit la forme des raccordements de segments en SVG.
stroke-miterlimit
Limite le dépassement des raccordements de segments avec un angle aigu.
stroke-opacity
Définit l'opacité (la transparence) du contour en SVG.