stroke-linecap CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die stroke-linecap CSS-Eigenschaft definiert die Form, die an den Enden von offenen Unterpfaden von ungefüllten Strichen 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 ungefüllte Striche haben kann, sowie für Textinhalts-Elemente (siehe stroke-linecap für eine vollständige Liste), aber als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und hat dennoch die beabsichtigte Wirkung auf die Striche der untergeordneten Elemente.
Syntax
/* 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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
butt-
Gibt an, dass der Strich für jeden Unterpfad nicht über seine beiden Endpunkte hinausgeht. Bei einem Unterpfad mit der Länge Null wird der Pfad überhaupt nicht gerendert. Dies ist der Standardwert.
round-
Gibt an, dass am Ende jedes Unterpfads der Strich um einen Halbkreis mit einem Durchmesser, der der Strichbreite entspricht, verlängert wird. Bei einem Unterpfad mit der Länge Null besteht der Strich aus einem vollständigen Kreis, welcher im Mittelpunkt des Unterpfads zentriert ist.
square-
Gibt an, dass am Ende jedes Unterpfads der Strich um ein Rechteck mit einer Breite, die der halben Breite des Strichs entspricht, und einer Höhe, die der Breite des Strichs entspricht, verlängert wird. Bei einem Unterpfad mit der Länge Null besteht der Strich aus einem Quadrat mit einer Breite, die der Strichbreite entspricht, zentriert am Punkt des Unterpfads.
Formale Definition
| Anfangswert | butt |
|---|---|
| Anwendbar auf | <circle>, <ellipse>, <line>, <path>, |