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 Länge des Gehrungsabstandes zur stroke-width definiert, die verwendet wird, um eine Gehrungsverbindung zu zeichnen. Wenn das Limit überschritten wird, wird die Verbindung von einer Gehrung zu einer Fase umgewandelt.

Hinweis: Als Präsentationsattribut hat stroke-miterlimit auch ein entsprechendes CSS-Property: stroke-miterlimit. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

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 die Gehrung weit über die Dicke der den Pfad umschließenden Linie hinausgeht. Das stroke-miterlimit Verhältnis wird verwendet, um zu definieren, wann das Limit überschritten wird. Ist dies der Fall, wird die Verbindung von einer Gehrung zu einer Fase umgewandelt.

Das Verhältnis der Gehrungslänge (Distanz zwischen der äußeren Spitze und der inneren Ecke der Gehrung) zur stroke-width steht in direktem Zusammenhang mit dem Winkel (Theta) zwischen den Segmenten im Benutzerraum gemäß der Formel:

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

Zum Beispiel, ein Gehrungslimit von 1,414 wandelt Gehrungen in Fasen für Winkel kleiner als 90 Grad um, ein Limit von 4,0 wandelt sie für Winkel kleiner als ungefähr 29 Grad um, und ein Limit von 10,0 wandelt sie für Winkel kleiner als ungefähr 11,5 Grad um.

Nutzungskontext

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