SVG line Element
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: