L'attribut stroke-miterlimit définit la limite du rapport entre la longueur du coin et la valeur de stroke-width utilisée pour dessiner la liaison entre deux segments de ligne. Quand la limite est dépassée, la liaison passe du type miter (pointu) au type bevel (biseauté).

Note: L'attribut stroke-miterlimit étant un attribut de présentation, il peut être utilisé comme propriété CSS.

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

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact du miterlimit par défaut -->
  <path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
        d="M1,9 l7   ,-3 l7   ,3
           m2,0 l3.5 ,-3 l3.5 ,3
           m2,0 l2   ,-3 l2   ,3
           m2,0 l0.75,-3 l0.75,3
           m2,0 l0.5 ,-3 l0.5 ,3" />
 
  <!-- Impact du miterlimit le plus petit (1) -->
  <path stroke="black" fill="none" stroke-linejoin="miter"
        stroke-miterlimit="1" id="p2"
        d="M1,19 l7   ,-3 l7   ,3
           m2, 0 l3.5 ,-3 l3.5 ,3
           m2, 0 l2   ,-3 l2   ,3
           m2, 0 l0.75,-3 l0.75,3
           m2, 0 l0.5 ,-3 l0.5 ,3" />

  <!-- Impact d'un large miterlimit (8) -->
  <path stroke="black" fill="none" stroke-linejoin="miter"
        stroke-miterlimit="8" id="p3"
        d="M1,29 l7   ,-3 l7   ,3
           m2, 0 l3.5 ,-3 l3.5 ,3
           m2, 0 l2   ,-3 l2   ,3
           m2, 0 l0.75,-3 l0.75,3
           m2, 0 l0.5 ,-3 l0.5 ,3" />
 
  <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait -->
  <path stroke="pink" fill="none" stroke-width="0.05"
        d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
           M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</svg>

Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par stroke-linejoin vaut miter, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio stroke-miterlimit est utilisé pour définir une limite à partir de laquelle la liaison est convertie de miter à bevel.

Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et stroke-width est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:

stroke-miterlimit = miterLength stroke-width = 1 sin ( θ 2 )

Par exemple, une limite de 1.414 convertit une liaison miter en bevel pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.

Contexte d'utilisation

Valeur <number>
Valeur par défaut 4
Animation Oui

La valeur de stroke-miterlimit doit être supérieure ou égale à 1.

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

Spécification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'stroke-miterlimit' 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-miterlimit' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte

Étiquettes et contributeurs liés au document

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