stroke-miterlimit

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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>

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"
    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 = \frac{miterLength}{stroke-width} = \frac{1}{\sin (\frac{θ}{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.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

Compatibilité des navigateurs

BCD tables only load in the browser