Dotted Line SVG
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
- The attributes x1 and y1 defines the start of the line on the x-axis and y-axis respectively.
- The attributes x and y2 defines the end of the line on the x-axis and y-axis respectively.
- style attribute is used to define the color and width of the line.
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
