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 eine Begrenzung für das Verhältnis der Miterlänge zur stroke-width festlegt, die verwendet wird, um eine Gehrungsfuge (miter join) zu zeichnen. Wenn die Begrenzung überschritten wird, wird die Gehrungsfuge in eine abgeschrägte Verbindung (bevel) umgewandelt.

Hinweis: Als Präsentationsattribut hat stroke-miterlimit auch 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
<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 für stroke-linejoin miter-Verbindungen festgelegt wurden, ist es möglich, dass die Gehrung weit über die Breite der Linie hinausgeht, die den Pfad zeichnet. Das stroke-miterlimit-Verhältnis wird verwendet, um festzulegen, wann die Grenze überschritten wird; in diesem Fall wird die Verbindung von einer Gehrungsfuge zu einer abgeschrägten Verbindung umgewandelt.

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

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

Zum Beispiel:

  • Ein Miter-Limit von 1,414 wandelt Gehrungen in Abschrägungen um, wenn der Winkel Theta kleiner als 90 Grad ist.
  • Ein Limit von 4,0 wandelt sie für Theta unter ungefähr 29 Grad um.
  • Ein Limit von 10,0 wandelt sie für Theta unter ungefähr 11,5 Grad um.

Gebrauchskontext

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-miterlimit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch