The stroke-linecap attribute defines the shape of the stroke that is to be used at the end of the open subpath. This is the presentation attribute.
Syntax:
stroke-linecap="shapes"
Attribute Values:
- butt: This attribute value indicates that the stroke does not extend beyond its two endpoints.
- round: This attribute value indicates that the stroke will extend by a half-circle with a diameter equal to the stroke width at its endpoints.
- square: This attribute value indicates that the stroke will be extended by a rectangle at its endpoints.
We will use the stoke-linecap attribute for defining the shape of the stroke.
Example 1:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 35 30"
xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="1" x2="5" y2="1" stroke="black"
stroke-linecap="butt" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 35 30"
xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="3" x2="5" y2="3" stroke="black"
stroke-linecap="round" />
</svg>
</body>
</html>
Output:
Example 3:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 35 30"
xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="5" x2="5" y2="5" stroke="black"
stroke-linecap="square" />
</svg>
</body>
</html>
output:
