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>
All five attributes are mandatory to add inside the <line>
element, else the line will not be displayed.
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>
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