stroke-miterlimit

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.

L'attributstroke-miterlimit définit la limite du rapport entre la longueur du coin et la valeur destroke-width utilisée pour dessiner laliaison entre deux segments de ligne. Quand la limite est dépassée, la liaison passe du typemiter (pointu) au typebevel (biseauté).

Note :L'attributstroke-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>

Exemple

html,body,svg {  height: 100%;}

html

<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"       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"       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"       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 parstroke-linejoin vautmiter, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratiostroke-miterlimit est utilisé pour définir une limite à partir de laquelle la liaison est convertie demiter àbevel.

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

$stroke-miterlimit = \frac{miterLength}{stroke-width} = \frac{1}{\sin (\frac{θ}{2})}$

Par exemple, une limite de 1.414 convertit une liaisonmiter enbevel 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.