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

Die stroke-linejoin CSS Eigenschaft definiert die Form, die bei den Ecken der Pfade eines SVG Elements verwendet wird. Falls vorhanden, überschreibt sie das stroke-linejoin Attribut des Elements.

Diese Eigenschaft gilt für jede SVG-Ecken-erzeugende Form oder Textinhalts-Element (siehe stroke-linejoin für eine vollständige Liste), aber als geerbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und dennoch 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 durch das Abschneiden der Ecke mit einer Linie, die senkrecht zu einer Linie ist, die den Unterschied der Teilpfadwinkel in dem Punkt halbiert, an dem sie aufeinandertreffen.
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 verlängert werden, 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 Verbindung gemäß bevel beschnitten und dann ein gefüllter Bogen hinzugefügt wird, um die Ecke abzurunden.

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 entsteht durch das Verlängern der äußeren Kanten des Strichs am Verknüpfungspunkt mit Bögen, die die gleiche Krümmung wie die äußeren Kanten an diesem Punkt haben.
crop: (Nicht unterstützt.) Gibt an, dass die Ecke über den Verknüpfungspunkt hinaus verlängert werden soll, um die minimale Menge, die notwendig ist, um eine konvexe Ecke zu bilden. Dies entspricht funktional miter (siehe oben) mit einem stroke-miterlimit Wert von 1.
fallback: (Nicht unterstützt; gefährdet.) Verhält sich identisch zu crop bevel, wenn der stroke-miterlimit Wert ü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 zeigt die drei derzeit unterstützten Schlüsselwortwerte für stroke-linejoin.

HTML

Wir richten vier identische Pfade ein, die alle eine schwarze Linie mit einer Breite von eins haben und keine Füllung.

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

Auf jeden der vier Pfade wird ein unterstützter Linienverbindungswert angewendet. Der erste ist abgeschrägt, der zweite abgerundet, der dritte abgeschrägt und der vierte ebenfalls abgeschrägt, jedoch mit einem stroke-miterlimit von 2, der die Ecke stattdessen abgeschrägt macht.

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