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.

Das stroke-miterlimit Attribut ist ein Präsentationsattribut, das ein Limit für das Verhältnis der Miterlänge zur stroke-width definiert, das verwendet wird, um eine Miterverbindung zu zeichnen. Wenn das Limit überschritten wird, wird die Verbindung von einer Miter- in eine Fasenverbindung umgewandelt.

Hinweis: Als ein Präsentationsattribut verfügt stroke-miterlimit auch über ein entsprechendes CSS-Property: stroke-miterlimit. Wenn beide angegeben sind, hat das CSS-Property Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

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

html

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact of the default miter limit -->
  <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 of the smallest miter limit (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 of a large miter limit (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" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <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>

Wenn sich zwei Liniensegmente in einem scharfen Winkel treffen und miter-Verbindungen für stroke-linejoin angegeben wurden, ist es möglich, dass sich der Miter weit über die Dicke der Linie, die den Pfad strichelt, hinaus erstreckt. Das Verhältnis stroke-miterlimit wird verwendet, um zu definieren, wann das Limit überschritten wird; in diesem Fall wird die Verbindung von einer Miter- in eine Fasenverbindung umgewandelt.

Das Verhältnis der Miterlänge (Abstand zwischen der äußeren Spitze und der inneren Ecke des Miter) zu stroke-width steht in direktem Zusammenhang mit dem Winkel (Theta) zwischen den Segmenten im Benutzerraum durch die Formel:

\text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}}

Zum Beispiel konvertiert ein Miterlimit von 1.414 Miter in Fasen für Theta kleiner als 90 Grad, ein Limit von 4.0 konvertiert sie für Theta kleiner als ungefähr 29 Grad, und ein Limit von 10.0 konvertiert sie für Theta kleiner als ungefähr 11,5 Grad.

Verwendungskontext

Wert	<number>
Standardwert	4
Animierbar	Ja

Der Wert von stroke-miterlimit muss größer oder gleich 1 sein.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

Browser-Kompatibilität

Siehe auch

CSS stroke-miterlimit Eigenschaft