How to draw a line in HTML5 SVG?

HTML5Web DevelopmentFront End Technology

SVG is a mark-up language based on XML that is used to describe two-dimensional vector graphics.SVG is essentially what HTML is to text when it comes to visuals.

The SVG <line> element produces lines. The <line> elements have no interior because they are geometrically one-dimensional single lines. They are never full as a result.

Syntax

<line
   x1="x-axis co-ordinate"
   y1="y-axis co-ordinate"

   x2="x-axis co-ordinate"
   y2="y-axis co-ordinate" >
</line>

Attributes

  • x1 − the beginning of the x-axis.

  • y1 − the beginning of the y-axis.

  • x2 − is the x-axis terminal point.

  • y2 − the y-terminus. axis's

Example 1

Using svg <line>

In the following example we are using svg <line> to draw a line.

<html> <title>Lines</title> <body> <svg width="450" height="350"> <line x1="9" y1="20" x2="200" y2="150" stroke="#8E44AD"></line> </svg> </body> </html>

When the above script is run, it will produce the following output, which shows a purple-colored line.

Example 2

Adding stroke-width Attribute

In the following example we are adding stroke-width to draw a line. By default, canvas grid lines are thin.

<!DOCTYPE html> <html> <title>Lines</title> <body> <svg width="450" height="350"> <line x1="9" y1="20" x2="200" y2="150" style="stroke-width: 10; stroke: black;"></line> </svg> <svg width="450" height="350"> <line x1="20" y1="60" x2="300" y2="170" style="stroke-width: 10; stroke: black;"></line> </svg> </body> </html>

On executing the above script, it will generate the following output, displaying a black line drawn with a width of 10.

Example 3

Adding Opacity Property

In the following example we are using the opacity which enables us make the line thick or thin.

<!DOCTYPE html> <html> <title>SVG Line</title> <body> <svg width="200" height="350"> <line x1="20" y1="30" x2="160" y2="170" stroke="#4F2EB0" stroke-width="5" opacity="0.5"></line> </svg> </body> </html>

On executing the above script, it will generate the output consisting of a thin line drawn on the webpage.

raja
Updated on 27-Sep-2022 13:06:35

Advertisements