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: