stroke-linejoin 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-linejoin CSS Eigenschaft definiert die Form, die an den Ecken der gestrichelten Pfade eines SVG-Elements verwendet wird. Wenn vorhanden, überschreibt sie das stroke-linejoin Attribut des Elements.
Diese Eigenschaft gilt für jede SVG-Ecke erzeugende Form oder Textinhalts-Element (siehe stroke-linejoin für eine vollständige Liste), kann aber als vererbte Eigenschaft auf Elemente wie <g> angewendet werden und hat immer noch die beabsichtigte Wirkung auf abgeleitete Elemente.
Syntax
/* keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;
/* Global values */
stroke-linejoin: inherit;
stroke-linejoin: initial;
stroke-linejoin: revert;
stroke-linejoin: revert-layer;
stroke-linejoin: unset;
Werte
bevel-
Gibt an, dass eine abgeflachte Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Das Abflachen wird durch das Abschneiden der Ecke durch eine Linie erreicht, die senkrecht zu einer Linie steht, die den Unterschied in den Unterpfadwinkeln in der Verbindungsstelle halbiert.
miter-
Gibt an, dass eine scharfe Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Die Ecke wird durch das Verlängern der äußeren Kanten des Strichs an den Tangenten der Pfadsegmente gebildet, bis sie sich schneiden. Dies ist der Standardwert.
round-
Gibt an, dass eine abgerundete Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Dies wird erreicht, indem die Verbindungsstelle gemäß
bevelabgeschnitten und dann ein gefüllter Bogen angefügt wird, um die Ecke zu runden.
Die folgenden Werte sind definiert, aber in keinem Browser unterstützt:
arcs-
(Nicht unterstützt.) Gibt an, dass eine Bogen-Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Die Form des Bogens wird durch das Verlängern der äußeren Kanten des Strichs an der Verbindungsstelle mit Bögen gebildet, die die gleiche Krümmung wie die äußeren Kanten an der Verbindungsstelle haben.
crop-
(Nicht unterstützt.) Gibt an, dass die Ecke über die Verbindungsstelle hinaus verlängert werden sollte, um die minimale Menge zu bilden, die notwendig ist, um eine konvexe Ecke zu bilden. Dies ist funktional identisch mit
miter(siehe oben) mit einemstroke-miterlimitWert von1. fallback-
(Nicht unterstützt; Gefahr.) Verhält sich identisch zu
crop bevel, wenn derstroke-miterlimitWert überschritten wird.
Formale Definition
| Anfangswert | miter |
|---|---|
| Anwendbar auf | <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
stroke-linejoin =
[ crop | arcs | miter ] ||
[ bevel | round | fallback ]
Beispiele
Linienverbindungsstile
Dieses Beispiel demonstriert die drei derzeit unterstützten Schlüsselwortwerte für stroke-linejoin.
HTML
Wir richten vier identische Pfade ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung haben.
<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path d="M2,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
</g>
</svg>
CSS
Zu jedem der vier Pfade wird ein unterstützter Linienverbindungswert angewendet. Der erste ist abgeflacht, der zweite abgerundet, der dritte gegehrtet und der vierte ebenfalls gegehrtet, jedoch mit einem stroke-miterlimit von 2, was die Ecke dazu zwingt, abgeflacht statt gegehrtet zu werden.
path:nth-child(1) {
stroke-linejoin: bevel;
}
path:nth-child(2) {
stroke-linejoin: round;
}
path:nth-child(3) {
stroke-linejoin: miter;
}
path:nth-child(4) {
stroke-linejoin: miter;
stroke-miterlimit: 2;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Fill and Stroke Module Level 3 # stroke-linejoin |