---
title: stroke-linejoin
slug: Web/SVG/Attribute/stroke-linejoin
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/stroke-linejoin
---
<div>{{SVGRef}}</div>

<p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p>

<div class="blockIndicator note"><strong>Note:</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</div>

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

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!--
  Chemin en haut à gauche:
  Effet de la valeur "miter"
  --&gt;
  &lt;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" /&gt;

  &lt;!--
  Chemin en haut au milieu:
  Effet de la valeur "round"
  --&gt;
  &lt;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" /&gt;

  &lt;!--
  Chemin en haut à droite:
  Effet de la valeur "bevel"
  --&gt;
  &lt;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" /&gt;

  &lt;!--
  Chemin en bas à gauche:
  Effet de la valeur "miter-clip"
  se replit sur la valeur par défaut (miter) si non pris en charge
  --&gt;
  &lt;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" /&gt;

  &lt;!--
  Chemin en bas à droite:
  Effet de la valeur "arcs"
  se replit sur la valeur par défaut (miter) si non pris en charge
  --&gt;
  &lt;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" /&gt;

  &lt;!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  --&gt;
  &lt;g id="highlight"&gt;
    &lt;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" /&gt;
    &lt;circle cx="1" cy="5"   r="0.05" fill="pink" /&gt;
    &lt;circle cx="3" cy="2"   r="0.05" fill="pink" /&gt;
    &lt;circle cx="5" cy="5.5" r="0.05" fill="pink" /&gt;
  &lt;/g&gt;
  &lt;use xlink:href="#highlight" x="6" /&gt;
  &lt;use xlink:href="#highlight" x="12" /&gt;
  &lt;use xlink:href="#highlight" x="2" y="6" /&gt;
  &lt;use xlink:href="#highlight" x="8" y="6" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p>
</div>

<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Valeur</th>
   <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td>
  </tr>
  <tr>
   <th scope="row">Valeur par défaut</th>
   <td><code>miter</code></td>
  </tr>
  <tr>
   <th scope="row">Animation</th>
   <td>Oui</td>
  </tr>
 </tbody>
</table>

<h3 id="arcs">arcs</h3>

<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div>

<p>La valeur <code>arcs</code> 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.</p>

<h4 id="Exemple">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Effet de la valeur "arcs" --&gt;
  &lt;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" /&gt;

  &lt;!--
  Lignes roses qui indiquent la position
  du chemin pour chaque trait
  --&gt;
  &lt;g id="p"&gt;
    &lt;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" /&gt;
    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p>

<h3 id="bevel">bevel</h3>

<p>La valeur <code>bevel</code> indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.</p>

<h4 id="Exemple_2">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

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

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

<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p>

<h3 id="miter">miter</h3>

<p>La valeur <code>miter</code> 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.</p>

<div class="blockIndicator note"><strong>Note:</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</div>

<h4 id="Exemple_3">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

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

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

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

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

    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('miter', '100%', 200)}}</p>

<h3 id="miter-clip">miter-clip</h3>

<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div>

<p>La valeur <code>miter-clip</code> 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.</p>

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

<h4 id="Exemple_4">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

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

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

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

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

    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p>

<h3 id="round">round</h3>

<p>La valeur <code>round</code> indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.</p>

<h4 id="Exemple_5">Exemple</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

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

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

<p>{{EmbedLiveSample('round', '100%', 200)}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Définition pour les formes et le texte</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Définition initiale pour les formes et le texte</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>

<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p>