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 ⁨April 2017⁩.

Die stroke-miterlimit CSS-Eigenschaft definiert eine Begrenzung des Verhältnisses von der Länge der Fase zur stroke-width, wenn die Form, die an den Ecken eines SVG-Elements für den Pfadstrich verwendet wird, ein Fasenverbinder ist. Wird das durch diese Eigenschaft definierte Limit überschritten, wird der Verbinder von miter zu bevel geändert, wodurch die Ecke abgeschnitten erscheint.

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

Beschreibung

Wenn sich zwei Liniensegmente in einem scharfen Winkel treffen und miter-Verbinder für stroke-linejoin angegeben sind oder den Standardwert annehmen, ist es möglich, dass die Fase weit über die Dicke der Linie hinaus reicht, die den Pfad überstreicht. Das Verhältnis stroke-miterlimit wird verwendet, um eine Grenze zu definieren, über die der Verbinder von einer Fase zu einer Schräge geändert wird.

Das Verhältnis der Fasenlänge (die Entfernung zwischen der äußeren Spitze und der inneren Ecke der Fase) zur stroke-width steht in direktem Bezug zum 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 Fasengrenzwert von 1.414 Fasen zu Schräge bei einem Theta-Wert von weniger als 90 Grad, ein Grenzwert von 4.0 konvertiert sie bei einem Theta von weniger als etwa 29 Grad, und ein Grenzwert von 10.0 konvertiert sie bei einem 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 unterhalb davon sind ungültig. Der Anfangswert 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 Fasenbegrenzungen

Dieses Beispiel demonstriert die Wirkung verschiedener Werte der Eigenschaft stroke-miterlimit.

HTML

Wir erstellen fünf Pfade mit mehreren Segmenten, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung haben. Jeder Pfad erzeugt eine Reihe von Bergsymbolen, die von links (einem flachen Eckwinkel) nach rechts (einem extremen Eckwinkel) verlaufen.

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 (ganz linke) Unterpfad gefast wird; beim zweiten Pfad die ersten zwei Unterpfade gefast werden; und so weiter, bis beim fünften Pfad alle fünf Unterpfade gefast werden.

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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