The SVG <line> element is used to draw line. The start point and endpoints are given to draw the line.
Syntax:
<line
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate" >
</line>
Attribute:
- x1: x-axis start point.
- y1: y-axis start point.
- x2: x-axis end point.
- y2: y-axis end point.
Example:
< html >
< title >SVG Line</ title >
< body >
< svg width = "400" height = "400" >
< line x1 = "10" y1 = "10" x2 = "130" y2 = "130"
stroke = "green" ></ line >
</ svg >
</ body >
</ html >
|
Output:
Example: Change opacity of the line.
< html >
< title >SVG Line</ title >
< body >
< svg width = "400" height = "400" >
< line x1 = "10" y1 = "10" x2 = "130" y2 = "130"
stroke = "green" stroke-width = "3"
opacity = "0.3" ></ line >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...