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 CSS-Eigenschaft stroke-miterlimit legt einen Grenzwert für das Verhältnis der Länge einer Gehrung zur stroke-width fest, wenn die Ecken eines mit einer Kontur versehenen Pfads eines SVG-Elements als Gehrung ausgeführt werden. Wird der durch diese Eigenschaft festgelegte Grenzwert überschritten, wird die Verbindung von miter zu bevel geändert, sodass die Ecke abgeschnitten erscheint.
Diese Eigenschaft gilt für alle SVG-Formen und Textinhaltselemente, die Ecken erzeugen können (eine vollständige Liste finden Sie unter stroke-miterlimit). Da sie vererbt wird, kann sie auch auf Elemente wie <g> angewendet werden und wirkt sich dann wie beabsichtigt auf die Konturen der untergeordneten Elemente aus. Ist die Eigenschaft vorhanden, hat sie Vorrang vor dem Attribut stroke-miterlimit des Elements.
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 positive reelle Zahl größer oder gleich
1; kleinere Werte sind ungültig. Der Anfangswert ist4.
Beschreibung
Wenn zwei Liniensegmente in einem spitzen Winkel aufeinandertreffen und für stroke-linejoin miter festgelegt wurde oder dieser Wert standardmäßig gilt, kann die Gehrung weit über die Breite der Pfadkontur hinausragen. Das Verhältnis stroke-miterlimit legt einen Grenzwert fest, ab dem die Gehrung durch eine abgeschrägte Verbindung ersetzt wird.
Das Verhältnis der Gehrungslänge (des Abstands zwischen der äußeren Spitze und der inneren Ecke der Gehrung) zur stroke-width hängt über die folgende Formel direkt mit dem Winkel (Theta) zwischen den Segmenten im Benutzerkoordinatensystem zusammen:
Beispielsweise werden bei einem Gehrungsgrenzwert von 1.414 Gehrungen für Theta-Werte unter 90 Grad durch abgeschrägte Verbindungen ersetzt. Bei einem Grenzwert von 4.0 geschieht dies für Theta-Werte unter etwa 29 Grad und bei einem Grenzwert von 10.0 für Theta-Werte unter etwa 11,5 Grad.
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 Gehrungsgrenzwerte
Dieses Beispiel zeigt die Wirkung verschiedener Werte für die Eigenschaft stroke-miterlimit.
HTML
Wir erstellen fünf Pfade aus mehreren Segmenten, alle mit einer schwarzen Kontur der Breite eins und ohne Füllung. Jeder Pfad bildet eine Reihe von Bergsymbolen, von links (ein flacher Eckwinkel) nach rechts (ein sehr spitzer Eckwinkel).
<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 weisen den Pfaden zunehmend größere Werte für stroke-miterlimit zu: Beim ersten Pfad hat nur der erste (ganz linke) Teilpfad Gehrungen, beim zweiten Pfad die ersten beiden Teilpfade und so weiter, bis beim fünften Pfad alle fünf Teilpfade Gehrungen haben.
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 |