stroke-linecap

Die CSS-Eigenschaft stroke-linecap dient zum Festlegen der Start- und Endpunkte eines Randes bei SVG-Formen.

.module {
  stroke-linecap: round;
}

Denken Sie daran

• Dies überschreibt ein Präsentationsattribut <path stroke-linecap="square" ... />
• Dies überschreibt nicht einen Inline-Stil, z.B. <path style="stroke-linecap: square;" ... />

Werte

Die Eigenschaft stroke-linecap kann folgende Werte annehmen

• butt (Standard): beendet den Strich mit einem scharfen 90-Grad-Winkel
• square: ähnlich wie butt, außer dass der Strich über die Länge des Pfades hinausgeht
• round: fügt einen Radius hinzu, der die Start- und Endpunkte glättet und durch stroke-width gesteuert wird

Siehe den Pen stroke-linecap property von CSS-Tricks (@css-tricks) auf CodePen.

Verwandt

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

Weitere Informationen

• SVG 1.1 Spezifikation
• MDN zu Füllungen und Strichen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	Ja	Ja	9+	4.4+	Ja