crus4

crus4

Dotted Line SVG


Table of Contents

SVG Line

The <line> element is used to draw a Line.

In an example below let’s write an SVG code to draw a line:

Example

<!DOCTYPE html>
<html>
<head>
<title> SVG Line </title>
</head>
<body>
<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:green;stroke-width:3" />
</svg>
</body>
</html>

Attributes Used in the Code

All five attributes are mandatory to add inside the <line> element, else the line will not be displayed.

Change opacity of the line

We can also change the opacity of the line by adding the opacity attribute inside the <line> element.

In an example below let’s write an SVG code to change the opacity of the line:

Example

<!DOCTYPE html>
<html>
<head>
<title> SVG Line </title>
</head>
<body>
<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:green;stroke-width:6" opacity="0.3"/>
</svg>
</body>
</html>

Dotted Line SVG

We can also draw a dotted SVG line.

Below in an example let’s write a code to draw a dotted SVG line:

Example

<!DOCTYPE html>
<html>
<head>
<title>Dotted SVG Line</title>
</head>
<body>
   <svg width="350" height="20">
	<line stroke-dasharray="5, 5" x1="0" y1="10" x2="350" y2="10" style="stroke:black; stroke-width:2"></line>
   </svg>		  
</body>
</html>

The stroke-dasharray attribute is used to define the pattern of dashes and gaps. In an example, we have set it’s value 5,5 by increasing the value the dashes and gaps will also increase. You can check it on our Online Code Editor.


Related Posts

SVG Drawing Ellipse

Animated Circle SVG

SVG Rectangle

Dotted Line SVG – crus4