`stroke-miterlimit` CSS property

Baseline Weitgehend verfügbar

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

Die stroke-miterlimit-CSS-Eigenschaft definiert eine Begrenzung für das Verhältnis der Miterlänge zur stroke-width, wenn die Form, die an den Ecken eines gestrichelten Pfades eines SVG-Elements verwendet werden soll, ein Gehrungsanschluss (mitered join) ist. Wenn die durch diese Eigenschaft definierte Grenze überschritten wird, wird der Anschluss von miter zu bevel konvertiert, sodass die Ecke abgeschnitten erscheint.

Diese Eigenschaft gilt für jede SVG-Eckenerzeugende Form oder Textinhaltselement (siehe stroke-miterlimit für eine vollständige Liste), aber als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und trotzdem die beabsichtigte Wirkung auf die Striche der Nachkommenelemente haben. Wenn vorhanden, überschreibt sie das stroke-miterlimit-Attribut des Elements.

Beschreibung

Wenn zwei Liniensegmente in einem scharfen Winkel und miter-Verbindungen für stroke-linejoin angegeben wurden oder wenn sie standardmäßig auf diesen Wert eingestellt sind, kann es passieren, dass sich das Gehrungsstück weit über die Dicke der den Pfad überstreichenden Linie hinaus erstreckt. Das stroke-miterlimit-Verhältnis wird verwendet, um eine Grenze zu definieren, über die hinaus der Anschluss von einer Gehrung zu einer Fase konvertiert wird.

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

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

Zum Beispiel wandelt ein Gehrungslimit von 1.414 die Gehrung zu Fasen für einen Theta-Wert von weniger als 90 Grad um, ein Limit von 4.0 konvertiert sie für einen Theta von weniger als etwa 29 Grad, und ein Limit von 10.0 konvertiert sie für einen Theta von weniger als etwa 11,5 Grad.

Syntax

css

/* number values */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* Global values */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

Werte

<number>: Jede reale positive Zahl, die gleich oder größer als 1 ist; Werte darunter sind ungültig. Der Standardwert ist 4.

Formale Definition

Anfangswert	`4`
Anwendbar auf	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

stroke-miterlimit = 
  <number>

Beispiele

Verschiedene Gehrungsgrenzen

Dieses Beispiel demonstriert die Wirkung verschiedener Werte für die Eigenschaft stroke-miterlimit.

HTML

Wir richten fünf mehrsegmentige Pfade ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung verwenden. Jeder Pfad erstellt eine Reihe von Bergsymbolen, die von links (ein flacher Eckwinkel) nach rechts (ein extremer Eckwinkel) gehen.

html

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 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" />
    <path
      d="M1,12 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" />
    <path
      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" />
    <path
      d="M1,26 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" />
    <path
      d="M1,33 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" />
  </g>
</svg>

CSS

Wir wenden zunehmend größere Werte von stroke-miterlimit auf die Pfade an, sodass beim ersten Pfad nur der erste (linkeste) Unterpfad gegehrt ist; beim zweiten Pfad sind die ersten beiden Unterpfade gegehrt; und so weiter, bis beim fünften Pfad alle fünf Unterpfade gegehrt sind.

css

path:nth-child(1) {
  stroke-miterlimit: 1.1;
}
path:nth-child(2) {
  stroke-miterlimit: 1.4;
}
path:nth-child(3) {
  stroke-miterlimit: 1.9;
}
path:nth-child(4) {
  stroke-miterlimit: 4.2;
}
path:nth-child(5) {
  stroke-miterlimit: 6.1;
}

Spezifikationen

Spezifikation
CSS Fill and Stroke Module Level 3 # stroke-miterlimit

Browser-Kompatibilität

Siehe auch

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

stroke-miterlimit CSS property

HTML

CSS

Help improve MDN

`stroke-miterlimit` CSS property