stroke-linejoin

Syntaxe

/* Valeurs avec un mot-clé */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;

/* Valeurs globales */
stroke-linejoin: inherit;
stroke-linejoin: initial;
stroke-linejoin: revert;
stroke-linejoin: revert-layer;
stroke-linejoin: unset;

Valeurs

bevel

Indique qu'un coin biseauté doit être utilisé pour joindre les segments de chemin. Le biseau est formé en tronquant le coin par une ligne perpendiculaire à une ligne qui divise la différence des angles des sous-tracés là où ils se rencontrent au point de jonction.

miter

Indique qu'un coin pointu doit être utilisé pour joindre les segments de chemin. Le coin est formé en prolongeant les bords extérieurs du contour aux tangentes des segments de chemin jusqu'à ce qu'ils se croisent. C'est la valeur par défaut.

round

Indique qu'un coin arrondi doit être utilisé pour joindre les segments de chemin. Cela se fait en coupant la jonction comme pour bevel, puis en ajoutant un arc rempli tangent pour arrondir le coin.

Les valeurs suivantes sont définies, mais ne sont prises en charge par aucun navigateur :

arcs

(N'est pas pris en charge.) Indique qu'un coin en arc doit être utilisé pour joindre les segments de chemin. La forme de l'arc est formée en prolongeant les bords extérieurs du contour au point de jonction avec des arcs ayant la même courbure que les bords extérieurs au point de jonction.

crop

(N'est pas pris en charge.) Indique que le coin doit s'étendre au-delà du point de jonction de la manière minimale nécessaire pour former un coin convexe. Cela équivaut fonctionnellement à miter (voir ci-dessus) avec une valeur de stroke-miterlimit de 1.

fallback

(N'est pas pris en charge ; à risque.) Se comporte de manière identique à crop bevel lorsque la valeur de stroke-miterlimit est dépassée.

Définition formelle

Syntaxe formelle

stroke-linejoin = 
  [ crop | arcs | miter ]       ||
  [ bevel | round | fallback ]  

Exemples

Styles de jonction de ligne

Cet exemple montre les trois valeurs de mot-clé actuellement prises en charge pour stroke-linejoin.

HTML

Nous configurons quatre chemins identiques, tous ayant un contour noir d'une largeur de un et sans remplissage.

<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M2,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
  </g>
</svg>

CSS

À chacun des quatre chemins, une valeur de jonction de ligne prise en charge est appliquée. Le premier est biseauté, le deuxième arrondi, le troisième en coin, et le quatrième également en coin mais avec une stroke-miterlimit de 2, ce qui force le coin à être biseauté au lieu d'être en coin.

path:nth-child(1) {
  stroke-linejoin: bevel;
}
path:nth-child(2) {
  stroke-linejoin: round;
}
path:nth-child(3) {
  stroke-linejoin: miter;
}
path:nth-child(4) {
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

Résultats

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété stroke-dasharray
• La propriété stroke-dashoffset
• La propriété stroke-linecap
• La propriété stroke-miterlimit
• La propriété stroke-opacity
• La propriété stroke-width
• La propriété raccourcie stroke
• L'attribut SVG stroke-linejoin