SVG/Attribut/stroke-linecap

Das stroke-linecap-Attribut verändert das Aussehen von Linienenden, z.B. bei Pfaden, Linien und Polylinien.

Erlaubte Werte

• butt: rechteckige, an den Endpunkten beschnittene Enden
• round: abgerundete Enden (über die Endpunkte hinaus)
• square: rechteckige Enden (über die Endpunkte hinaus)

Standardwert

butt

anwendbar auf

Formen und Text-Elemente

Präsentationsattribut

ja

mit CSS animierbar

discrete

Beispiel

#eins {
  stroke-linecap: butt;
  } 
#zwei {
  stroke-linecap: round;
  } 
#drei {
  stroke-linecap: square;
  }

Die Linien haben einen stumpfen, runden, sowie etwas überstehenden Linienendpunkt.

Beachten Sie: Die Wertangaben round und square ragen über die Endpunkte hinaus.

Siehe auch

• SVG/Farben/Kontur#stroke-linecap

Weblinks

• Spezifikation (W3C): StrokeLinecap Property
• MDN: stroke-linecap