stroke-linejoin

stroke-linejoin ist eine CSS-Eigenschaft, die definiert, wie SVG-Pfade an der Stelle erscheinen sollen, an der zwei Linien miteinander verbunden werden. stroke-linejoin kann verwendet werden, um die Ecken verbundener Linien in einem SVG zu schärfen oder zu glätten.

stroke-linejoin ist auch ein SVG-Attribut, das mit CSS überschrieben werden kann.

stroke-linejoin: miter;

stroke-linejoin ist nur eine von mehreren Eigenschaften, die das Rendering von zwei aufeinandertreffenden Pfaden beeinflussen. Der endgültige visuelle Effekt hängt von stroke-linejoin sowie von den Werten anderer SVG-Eigenschaften wie stroke-miterlimit und stroke-align ab.

Syntax

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

Derzeit scheinen Browser nur einen einzigen Wert für stroke-linejoin zu unterstützen. Laut dem W3C Working Draft des CSS Fill and Stroke Module gibt es jedoch Ideen, zwei Werte zu kombinieren (einen aus crop | arcs | miter und einen aus bevel | round), um eine Kombination von Effekten für stroke-linejoin zu erzeugen.

Werte

stroke-linejoin akzeptiert die folgenden Werte

• crop erweitert die Ecke um das minimale Maß über den Eckpunkt hinaus, das zur Bildung einer konvexen Ecke erforderlich ist. Dies ist im Wesentlichen dasselbe wie miter, außer dass crop dafür sorgt, dass sich stroke-miterlimit so verhält, als wäre es auf den Wert "1" gesetzt.
• arcs bildet eine Spitze mit der gleichen Krümmung wie die verbindenden Pfade.
• miter verbindet die Linien an einer scharfen Spitze.
• bevel beschneidet den Verbindungspunkt senkrecht zur Ecke.
• round ähnelt bevel, mit dem Unterschied, dass anstelle einer flachen Linie eine kreisförmige "abgerundete" Kante hinzugefügt wird.

Beispiel

Sehen Sie sich den Pen stroke-linejoin example
von CSS-Tricks (@css-tricks) auf CodePen an.

Browser-Unterstützung

Verwandt

• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-width

Ressourcen

• W3C Working Draft des CSS Fill and Stroke Module