`Stroke-linecap` - Propriété CSS

stroke-linecap

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

Description rapide

Définit la forme des embouts de lignes (en SVG).

Statut

Standard

S'applique à

Formes SVG.

Utilisable sur

SVG

Valeurs prédéfinies

butt | round | square

Pourcentages

Ne s'appliquent pas.

Valeur initiale

butt

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété stroke-linecap passe d'une valeur à l'autre sans transition.

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)

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

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

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

Sur un document SVG, stroke-linecap définit la forme des extrémités des lignes (arrondies, carrées, etc). stroke-linecap ne concerne que les extrémités des lignes : dans le cas d'une ligne composée de plusieurs segments, le raccordement des segments est géré par la propriété stroke-linejoin.

Dans le cas d'un tracé en pointillé, chaque tiret du pointillé est considéré comme un segment isolé, et ses extrémités sont donc impactées par stroke-linecap.

Valeurs pour `stroke-linecap`.

stroke-linecap: butt;

Les extrémités de ligne sont carrées. La ligne mesure exactement la longueur spécifiée.

Sur nos exemples, deux lignes droites sont superposées : la ligne blanche et fine indique la longueur spécifiée par les coordonnées, tandis que la ligne en bleu épais indique la forme des extrémités. Une ligne courbe en pointillés est également présentée.

SVG

stroke-linecap:butt
stroke-linecap: round;

Les extrémités de ligne sont arrondies. La longueur de la ligne est augmentée d'une demi épaisseur (le rayon de l'arrondi). Une ligne de longueur nulle sera représentée par un cercle dont le rayon est l'épaisseur de la ligne.

SVG

stroke-linecap:round
stroke-linecap: square;

Les extrémités de ligne sont carrées. La longueur de la ligne est augmentée d'une demi épaisseur. Une ligne de longueur nulle sera traduite par un carré dont le côté est l'épaisseur de la ligne.

SVG

stroke-linecap:square
stroke-linecap: initial; (butt) stroke-linecap: inherit; stroke-linecap: revert; stroke-linecap: revertLayer; stroke-linecap: unset;

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

Exemple d'animation de `stroke-linecap`.

D'après la spécification du W3C, la propriété stroke-linecap ne peut être animée, mais dans la pratique, elle s'anime de façon discrete; c'est à dire qu'elle passe brutalement d'une valeur à une autre.

SVG

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

stroke-linecap :

butt

round

square

SVG

Compatibilité des navigateurs avec `stroke-linecap`.

Colonne 1

Support par les navigateurs de la possibilité de choisir la forme des embouts de ligne avec la propriété stroke-linecap.

Propriété
stroke-linecap

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

Chrome

Edge

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Androïd Brower

Chrome pour Androïd

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-linecap`.

SVG (Scalable Vector Graphics)

Concernant stroke-linecap. Première introduction de la propriété stroke-linecap.

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

Concernant stroke-linecap. Transfert de la description de cette propriété dans le module "Traits et remplissages". Pas de changement concernant la définition de stroke-linecap.

13 Avril 2017
Document de travail.

Voir aussi, au sujet de SVG.

De plus en plus de propriétés s'appliquent aussi au SVG. La propriété stroke-linecap fait partie du module Module CSS - Traits et remplissages. Les définitions suivantes sont également décrites dans ce module.