« SVG Attribute reference home
the stroke-linecap
attribute specifies the shape to be used at the end of open subpaths when they are stroked.
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
Usage context
Categories | Presentation attribute |
---|---|
Value | butt | round | square | inherit |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
Example
<?xml version="1.0"?> <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="https://www.w3.org/2000/svg"> <line stroke-linecap="butt" x1="30" y1="30" x2="30" y2="90" stroke="black" stroke-width="20"/> <line stroke-linecap="round" x1="60" y1="30" x2="60" y2="90" stroke="black" stroke-width="20"/> <line stroke-linecap="square" x1="90" y1="30" x2="90" y2="90" stroke="black" stroke-width="20"/> <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" stroke="white" /> </svg>
Live sample
Elements
The following elements can use the stroke-linecap
attribute