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 April 2017.

Die stroke-linecap CSS Eigenschaft definiert die Form, die am Ende von offenen Teilpfaden der ungeschlossenen Striche von SVG Elementen verwendet werden soll. Wenn vorhanden, überschreibt sie das stroke-linecap Attribut des Elements.

Diese Eigenschaft gilt für jede SVG-Form, die ungeschlossene Striche und Textelemente haben kann (siehe stroke-linecap für eine vollständige Liste), kann aber als geerbte Eigenschaft auf Elemente wie <g> angewendet werden und hat immer noch den beabsichtigten Effekt auf die Striche der Nachkommenelemente.

Syntax

css
/* keyword values */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;

/* Global values */
stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;

Werte

butt

Gibt an, dass der Strich für jeden Teilpfad nicht über seine beiden Endpunkte hinausgeht. Bei einem Teilpfad mit Null-Länge wird der Pfad überhaupt nicht gerendert. Dies ist der Standardwert.

round

Gibt an, dass am Ende jedes Teilpfads der Strich um einen Halbkreis mit einem Durchmesser, der der Strichbreite entspricht, verlängert wird. Bei einem Teilpfad mit Null-Länge besteht der Strich aus einem vollständigen Kreis, der am Punkt des Teilpfads zentriert ist.

square

Gibt an, dass am Ende jedes Teilpfads der Strich um ein Rechteck mit einer Breite gleich der halben Breite des Strichs und einer Höhe gleich der Breite des Strichs verlängert wird. Bei einem Teilpfad mit Null-Länge besteht der Strich aus einem Quadrat mit einer Breite, die der Strichbreite entspricht, das am Punkt des Teilpfads zentriert ist.

Formale Definition

Anfangswertbutt
Anwendbar auf<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

stroke-linecap = 
  butt    |
  round   |
  square

Beispiele

Linie-Enden

Dieses Beispiel demonstriert die drei Schlüsselwortwerte der Eigenschaft.

HTML

Zunächst richten wir ein hellgraues Rechteck ein. Dann werden in einer Gruppe drei Pfade definiert, deren Länge genau der Breite des Rechtecks entspricht und die alle am linken Rand des Rechtecks beginnen. Sie sind alle so eingestellt, dass sie einen dodgerblue Strich mit einer Breite von sieben haben.

html
<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#DDD" />
  <g stroke="dodgerblue" stroke-width="7">
    <path d="M 10,10 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

CSS

Anschließend wenden wir über CSS einen unterschiedlichen Linie-Enden-Stil auf jeden Pfad an.

css
path:nth-of-type(1) {
  stroke-linecap: butt;
}
path:nth-of-type(2) {
  stroke-linecap: square;
}
path:nth-of-type(3) {
  stroke-linecap: round;
}

Ergebnisse

Der erste Pfad hat butt Linie-Enden, was im Wesentlichen bedeutet, dass der Strich genau bis zu den Endpunkten des Pfads (sowohl Anfang als auch Ende) läuft und nicht weiter. Der zweite Pfad hat square Linie-Enden, so dass der sichtbare Pfad über die Endpunkte des Pfads hinausgeht, wodurch die Gesamtlänge des Pfads 87 zu sein scheint, da die Pfadlänge 80 beträgt und jede der beiden quadratischen Enden 3,5 breit ist. Der dritte Pfad hat circle Enden, so dass er auch 87 Einheiten lang erscheint, die beiden Enden sind jedoch halbkreisförmig anstatt quadratisch.

Spezifikationen

Specification
CSS Fill and Stroke Module Level 3
# stroke-linecap

Browser-Kompatibilität

Siehe auch