stroke-linejoin

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-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-Form, die Ecken erzeugt, oder für Textinhaltselemente (siehe stroke-linejoin für eine vollständige Liste), jedoch als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und trotzdem die beabsichtigte Wirkung auf nachfolgende Elemente haben.

Syntax

css
/* 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 abgeschrägte Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Die Abschrägung entsteht, indem die Ecke durch eine Linie abgeschnitten wird, die senkrecht zu einer Linie steht, die den Unterschied in den Winkeln des Unterpfades bei ihrem Treffpunkt halbiert.

miter

Gibt an, dass eine scharfe Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Die Ecke wird gebildet, indem die äußeren Kanten des Strichs an den Tangenten der Pfadsegmente so lange verlängert werden, bis sie sich schneiden. Dies ist der Standardwert.

round

Gibt an, dass eine runde Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Dies wird erreicht, indem der Verbund wie bei bevel abgeschnitten wird, und dann ein gefüllter Kreisbogen angehängt 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 Arc-Ecke verwendet werden soll, um Pfadsegmente zu verbinden. Die Form des Bogens wird durch das Erweitern der äußeren Kanten des Strichs am Treffpunkt mit Bögen gebildet, die die gleiche Krümmung wie die äußeren Kanten am Treffpunkt haben.

crop

(Nicht unterstützt.) Gibt an, dass die Ecke über den Treffpunkt hinaus um den minimal notwendigen Betrag verlängert werden soll, um eine konvexe Ecke zu bilden. Dies ist funktionell äquivalent zu miter (siehe oben) mit einem stroke-miterlimit Wert von 1.

fallback

(Nicht unterstützt; gefährdet.) Verhält sich identisch mit crop bevel, wenn der stroke-miterlimit Wert überschritten wird.

Formale Definition

Anfangswertmiter
Anwendbar auf<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

stroke-linejoin = 
  [ crop | arcs | miter ]       ||
  [ bevel | round | fallback ]

Beispiele

Linienverbindungsstile

Dieses Beispiel demonstriert die drei aktuell 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.

html
<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

Für jeden der vier Pfade wird ein unterstützter Linienverbindungswert angewendet. Der erste wird abgeschrägt, der zweite abgerundet, der dritte gespitzt und der vierte ebenfalls gespitzt, aber mit einem stroke-miterlimit von 2, was die Ecke zwingt, statt gespitzt abgerundet zu werden.

css
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

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch