SVG stroke-linecap Attribute
Last Updated :
31 Mar, 2022
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"
< 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"
< 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"
< line x1 = "1" y1 = "5" x2 = "5" y2 = "5" stroke = "black"
stroke-linecap = "square" />
</ svg >
</ body >
</ html >
|
output:
Share your thoughts in the comments
Please Login to comment...