The SVG line is one of the simplest in the library. It draws a straight line from
one point to another. The syntax is very straightforward and can be experimented with at: http://localhost:8080/chapter-2/line.html, assuming the HTTP server is running:
<line x1="10" y1="10" x2="100" y2="100" stroke-width="1"
stroke="red"/>
This will give you the following output:
A description of the element's attributes is as follows:
- x1 and y1: The starting x and y coordinates
- x2 and y2: The ending x and y coordinates
- stroke: This gives the line a red color
- stroke-width: This denotes the width of the line to be drawn in pixels
The line tag also has the ability to change the style of the end of the line. For example, adding the following would change the image so it has round ends:
stroke-linecap: round;
As stated...
