L'attribut stroke-linejoin définit la manière de dessiner la liaison entre deux segments de ligne.

Note: stroke-linejoin étant un attribut de présentation, il peut être utililsé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, et <tspan>

<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">  
  <!--
  Chemin en haut à gauche:
  Effet de la valeur "miter"
  -->
  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
        stroke-linejoin="miter" />
 
  <!--
  Chemin en haut au milieu:
  Effet de la valeur "round"
  -->
  <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
        stroke-linejoin="round" />
 
  <!--
  Chemin en haut à droite:
  Effet de la valeur "bevel"
  -->
  <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
        stroke-linejoin="bevel" />
 
  <!--
  Chemin en bas à gauche:
  Effet de la valeur "miter-clip"
  se replit sur la valeur par défaut (miter) si non pris en charge
  -->
  <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
        stroke-linejoin="miter-clip" />
 
  <!--
  Chemin en bas à droite:
  Effet de la valeur "arcs"
  se replit sur la valeur par défaut (miter) si non pris en charge
  -->
  <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
        stroke-linejoin="arcs" />
 
  <!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g id="highlight">
    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
          stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5"   r="0.05" fill="pink" />
    <circle cx="3" cy="2"   r="0.05" fill="pink" />
    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
  </g>
  <use xlink:href="#highlight" x="6" />
  <use xlink:href="#highlight" x="12" />
  <use xlink:href="#highlight" x="2" y="6" />
  <use xlink:href="#highlight" x="8" y="6" />
</svg>

Contexte d'utilisation

Valeur arcs | bevel |miter | miter-clip | round
Valeur par défaut miter
Animation Oui

arcs

Note: La valeur arcs a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir Compatibilité des navigateurs ci-dessous pour plus de détails.

La valeur arcs indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.

Exemple

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la valeur "arcs" -->
  <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
        stroke-linejoin="arcs" />

  <!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g id="p">
    <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
          stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>

bevel

La valeur bevel indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.

Exemple

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la valeur "bevel" -->
  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
        stroke-linejoin="bevel" />

  <!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3"
          stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>

miter

La valeur miter indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.

Note: Si la longueur du coin dépasse stroke-miterlimit, un coin de type bevel est utilisé à la place.

Exemple

<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la valeur "miter" -->
  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
        stroke-linejoin="miter" />

  <!-- Effet de la valeur "miter" sur un angle aigu
       où la limite stroke-miterlimit est dépassée -->
  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
        stroke-linejoin="miter" />

  <!-- Ligne rouge pointillé qui indique la limite
       à partir de laquelle une liaison miter devient bevel -->
  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>

  <!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
    
    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="7"    cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
  </g>
</svg>

miter-clip

Note: La valeur miter-clip a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir Compatibilité des navigateurs ci-dessous pour plus de détails.

La valeur miter-clip indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.

Si la longueur du coin dépasse stroke-miterlimit, le coin tronqué à une distance égale à la moitié de la valeur de stroke-miterlimit multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que miter sur les angles très aigus et dans le cas d'une animation.

Exemple

<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la valeur "miter-clip" -->
  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
        stroke-linejoin="miter-clip" />

  <!-- Effet de la valeur "miter-clip" sur un angle aigu 
       où la limite stroke-miterlimit est dépassée -->
  <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
        stroke-linejoin="miter-clip" />

  <!-- Ligne rouge pointillé qui indique la limite
       à partir de laquelle le coin sera tronqué -->
  <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/>

  <!-- 
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
    
    <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="7"    cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5"  cy="5" r="0.05" fill="pink" />
  </g>
</svg>

round

La valeur round indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.

Exemple

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la valeur "round" -->
  <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
        stroke-linejoin="round" />

  <!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3"
          stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-linejoin' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et le texte
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'stroke-linejoin' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,