stroke-miterlimit

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das Attribut stroke-miterlimit ist ein Präsentationsattribut, das einen Grenzwert für das Verhältnis zwischen der Länge der Gehrung und der zum Zeichnen einer Gehrungsverbindung verwendeten stroke-width festlegt. Wird der Grenzwert überschritten, wird die Gehrungsverbindung in eine abgeschrägte Verbindung umgewandelt.

Hinweis: Als Präsentationsattribut hat stroke-miterlimit auch eine entsprechende CSS-Eigenschaft: stroke-miterlimit. Wenn beide angegeben sind, hat die CSS-Eigenschaft 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 zwei Liniensegmente in einem spitzen Winkel aufeinandertreffen und für stroke-linejoin miter festgelegt wurde, kann die Gehrung weit über die Breite der Linie hinausragen, mit der der Pfad gezeichnet wird. Das Verhältnis stroke-miterlimit legt fest, wann der Grenzwert überschritten ist. In diesem Fall wird die Gehrungsverbindung in eine abgeschrägte Verbindung umgewandelt.

Das Verhältnis der Gehrungslänge (des Abstands zwischen der äußeren Spitze und der inneren Ecke der Gehrung) zu stroke-width steht über die folgende Formel in direktem Zusammenhang mit dem Winkel (Theta) zwischen den Segmenten im Benutzerkoordinatensystem:

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

Beispielsweise werden bei einem Gehrungsgrenzwert von 1,414 Gehrungsverbindungen für Winkel unter 90 Grad in abgeschrägte Verbindungen umgewandelt. Bei einem Grenzwert von 4,0 geschieht dies für Winkel unter ungefähr 29 Grad und bei einem Grenzwert von 10,0 für Winkel unter ungefähr 11,5 Grad.

Verwendungshinweise

Wert	<number>
Standardwert	4
Animierbar	Ja

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

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

Browser-Kompatibilität

Siehe auch

CSS-Eigenschaft stroke-miterlimit

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden