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
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)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de stroke-linecap.

stroke-linecap - Syntax DiagramSyntax diagram of the stroke-linecap CSS property. See stylescss.free.fr for details. butt butt round round square squarestroke-linecap:;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 :
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.
1
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)

    Première introduction de la propriété stroke-linecap.
    WD
    28 Août 2012
    Document de travail.
    CR
    15 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Traits et remplissages - Niveau 3

    Transfert de la description de cette propriété dans le module "Traits et remplissages". Pas de changement concernant la définition de stroke-linecap.
    WD
    13 Avril 2017
    Document de travail.
    CR
    PR
    REC

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 CSS Fill and Stroke Module. Les définitions suivantes sont également décrites 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-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.
stroke-width
Définit l'épaisseur des tracés en SVG.