Stroke-linejoin - Propriété CSS

stroke-linejoin
stroke-miterlimit

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

Description rapide
Définit la forme des raccordements de segments en SVG.
Statut
Standard
Utilisable sur
SVG
Valeurs prédéfinies
miter | crop | arcs | bevel | round | fallback
Pourcentages
Ne s'appliquent pas.
Valeur initiale
miter
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété stroke-linejoin 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-linejoin.

stroke-linejoin - Syntax DiagramSyntax diagram of the stroke-linejoin CSS property. See stylescss.free.fr for details. crop crop arcs arcs miter miter bevel bevel round round fallback fallbackstroke-linejoin:;stroke-linejoin:;
Schéma syntaxique de la propriété stroke-linejoin.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété stroke-linejoin.

La propriété stroke-linejoin définit la forme des raccordements entre les segments d'une même ligne. Ces segments doivent être inclus dans une même forme (en général une forme path), sinon stroke-linejoin ne s'applique pas.

Tracé défini avec une seule forme
Les segments sont raccordés
svg path d="M20 80 L100 20 L180 80" / /svg
Tracé défini avec deux formes
Les segments ne sont pas raccordés
svg path d="M20 80 L100 20" / path d="M100 20 L180 80" / /svg

La propriété accepte deux valeurs. La première défini la forme extérieure du raccordement (la pointe). La deuxième valeur spécifie comment restituer le raccordement lorsque la propriété stroke-miterlimit impose une restriction sur la dimension du raccordement.

Cette deuxième valeur est pour l'instant mal gérée par les navigateurs (2024).

Voyez aussi la propriété stroke-miterlimit qui limite la taille de la pointe avec les raccordements du typemiter ou arcs.

Valeurs pour stroke-linejoin.

  • stroke-linejoin: miter;

    SVG
    SVG
    SVG
    stroke-linejoin:miter;
  • stroke-linejoin: bevel;

    SVG
    SVG
    SVG
    stroke-linejoin:bevel;
  • stroke-linejoin: round;

    SVG
    SVG
    SVG
    stroke-linejoin:round;
  • stroke-linejoin: arcs; ⚠

    SVG
    SVG
    SVG
    stroke-linejoin:arcs;

    Voici une simulation pour les navigateurs qui ne reconnaissent pas encore la valeur arcs.

    Exemple de raccordement du type arcs
    Simulation
  • stroke-linejoin: crop; ⚠

    Cette valeur est équivalente à miter mais force stroke-miterlimit à la valeur minimale de 1.

    SVG
    SVG
    SVG
    stroke-linejoin:crop;
  • stroke-linejoin: fallback; ⚠

    Cette valeur fait débat au sein du groupe de travail du W3C. Pour l'instant (2025), aucun navigateur ne la traite.
    Lorsque la valeur de stroke-miterlimit est dépassée, force une jointure des segments en crop bevel.

    SVG
    SVG
    SVG
    stroke-linejoin:fallback;
  • stroke-linejoin: initial; (miter) stroke-linejoin: inherit; stroke-linejoin: revert; stroke-linejoin: revertLayer; stroke-linejoin: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de stroke-linejoin.

Suivant la spécification du W3C, stroke-linejoin ne peut pas être animée. Cependant, dans la pratique il est possible d'animer cette propriété en passant brutalement d'une valeur à l'autre, comme le montre l'exemple ci-dessous. Les laps de temps pendant lesquels l'animation semble s'arrêter sont dus aux valeurs non reconnues par votre navigateur.

SVG

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

Sur l'échantillon ci-dessous, le tracé bleu épais est celui sur lequel on change la valeur de stroke-linejoin. Le tracé blanc et fin sert de comparaison. Il fait apparaître en particulier les changements de dimensions provoqués par les différents modes de jointures des segments.

stroke-linejoin :
SVG

Compatibilité des navigateurs avec stroke-linejoin.

Colonne 1
Prise en charge par les navigateurs de la propriété stroke-linejoin qui indique la forme des raccordements de segments.
Colonne 2
Support par les navigateurs de la propriété stroke-miterlimit qui limite les extensions des lignes lorsque deux segments se croisent à angle aigu.
1
Propriété
stroke-linejoin
2
Propriété
stroke-miterlimit
Estimation de la prise en charge globale.
95%
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
Caniuse

Histoire de la propriété stroke-linejoin.

  • SVG (Scalable Vector Graphics)

    Première présentation de la propriété stroke-linejoin.
    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 définition de cette propriété dans le module "Traits et remplissages". Changement du jeu de valeurs acceptée par la propriété.
    WD
    13 Avril 2017
    Document de travail.
    CR
    PR
    REC

Voir aussi - Les tracés en SVG

L'ajustement précis des tracés en SVG se fait par le biais de nombreuses propriétés : raccordement, épaisseur, extrémités, , pointillés, etc. Ces propriétés sont décrites dans la spécification CSS Fill and Stroke 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-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.