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.
Die stroke-miterlimit
CSS Eigenschaft definiert ein Limit für das Verhältnis der Kantenlänge zur stroke-width
, wenn die Form, die an den Ecken eines SVG Elements verwendet werden soll, eine Gehrungsfuge ist. Wenn das durch diese Eigenschaft definierte Limit überschritten wird, wird die Fuge von miter
zu bevel
umgewandelt, wodurch die Ecke abgeschnitten erscheint.
Diese Eigenschaft gilt für jede SVG-Eckengenerierende Form oder Textinhalts-Element (siehe stroke-miterlimit
für eine vollständige Liste), kann jedoch als vererbte Eigenschaft auf Elemente wie <g>
angewendet werden und hat dennoch den beabsichtigten Effekt 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 für stroke-linejoin
miter
Fugen angegeben wurden oder wenn sie auf diesen Wert voreingestellt sind, ist es möglich, dass die Gehrung weit über die Dicke der Linie hinausgeht, die den Pfad stricht. Das Verhältnis stroke-miterlimit
wird verwendet, um ein Limit festzulegen, über das hinaus die Fuge von einer Gehrung zu einer Fase umgewandelt wird.
Das Verhältnis der Kantenlänge (die Entfernung 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 Benutzerspace durch die Formel:
Zum Beispiel wandelt ein Gehrungs-Limit von 1.414
Gehrungen in Fasen für einen Theta-Wert von weniger als 90 Grad um, ein Limit von 4.0
wandelt sie um für einen Theta von weniger als etwa 29 Grad, und ein Limit von 10.0
wandelt sie für Theta von weniger als etwa 11.5 Grad um.
Syntax
/* 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; niedrigere Werte sind ungültig. Der Initialwert ist4
.
Formale Definition
Initialer Wert | 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 Gehrungslimits
Dieses Beispiel zeigt die Auswirkung verschiedener Werte für die Eigenschaft stroke-miterlimit
.
HTML
Wir richten fünf mehrgliedrige Pfade ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung verwenden. Jeder Pfad erzeugt eine Serie von Bergsymbolen, die von links (ein flacherer Winkel) nach rechts (ein extremer Winkel) verlaufen.
<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 (linke) Teilpfad gehrungt wird; beim zweiten Pfad sind die ersten beiden Teilpfade gehrungt; und so weiter, bis beim fünften Pfad alle fünf Teilpfade gehrungt sind.
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
BCD tables only load in the browser