Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML SVG <Line>

  • Last Updated : 19 Aug, 2020

The SVG <line> element is used to draw line. The start point and endpoints are given to draw the line.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!