stroke-linecap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das Attribut stroke-linecap ist ein Präsentationsattribut, das die Form definiert, die am Ende offener Teilpfade verwendet wird, wenn diese gestrichen werden.

Hinweis: Als Präsentationsattribut hat stroke-linecap auch ein entsprechendes CSS-Property: stroke-linecap. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>

Verwendungshinweise

Wert	`butt` \| `round` \| `square`
Standardwert	`butt`
Animierbar	diskret

butt

Der Wert butt gibt an, dass der Strich für jeden Teilpfad nicht über seine beiden Endpunkte hinausgeht. Bei einem Teilpfad mit einer Länge von null wird der Pfad überhaupt nicht gerendert.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="butt" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

Der Wert round gibt an, dass der Strich am Ende jedes Teilpfads um einen Halbkreis mit einem Durchmesser, der der Strichbreite entspricht, verlängert wird. Bei einem Teilpfad mit einer Länge von null besteht der Strich aus einem vollständigen Kreis, der am Punkt des Teilpfads zentriert ist.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

square

Der Wert square gibt an, dass der Strich am Ende jedes Teilpfads um ein Rechteck verlängert wird. Die Breite dieses Rechtecks entspricht der halben Strichbreite, und die Höhe entspricht der Strichbreite. Bei einem Teilpfad mit einer Länge von null besteht der Strich aus einem Quadrat, dessen Breite der Strichbreite entspricht und das am Punkt des Teilpfads zentriert ist.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # LineCaps

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS-Eigenschaft stroke-linecap