CSS-Eigenschaft stroke-linecap

Die Eigenschaft stroke-linecap stellt den Start- und Endpunkt einer Grenze auf Element ein.

Anfangswert	butt
Gilt für	Formen und Textinhaltselemente
Geerbt	Ja
Animierbar	Nein
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeLinecap = "round";

Syntax

stroke-linecap: butt | square | round | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-linecap</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        die folgenden rosa Linien markieren die 
Position der Bahn für jeden Hub
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit dem Wert "round":

Beispiel

<!DOCTYPE html>
<html>
<head>
  <title>Der Titel des Dokuments</title>
</head>
<body>
  <h2>Beispiel für die Eigenschaft stroke-linecap</h2>
  <svg viewBox="0 0 6 4">
    <!-- Effect of the "round" value -->
    <path d="M1,1 h4" stroke="#8ebf42"
      stroke-linecap="round" />
    <!-- Effect of the "round" value on a zero length path -->
    <path d="M3,3 h0" stroke="#8ebf42"
      stroke-linecap="round" />
    <!--
      die folgenden rosa Linien markieren die
      Position der Bahn für jeden Hub
      -->
    <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
    <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
  </svg>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit dem Wert "square":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-linecap</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="square" />
      <!--
       die folgenden rosa Linien markieren die
      Position der Bahn für jeden Hub
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
butt	Beendet den Hub mit einem scharfen Winkel. Auf dem Unterpfad 0 Länge wird der Pfad nicht gerendert. Das ist der Standardwert dieser Eigenschaft.
square	Erweitert den Hub über die Länge des Pfades hinaus.
round	Macht den Start- und Endpunkt rund.
Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.