The <line> Element

The SVG <line> element defines a straight line. A line has starting coordinates and ending coordinates. In addition, a line can have stroke, stroke-width, and stroke-opacity properties.

Thus, you can completely define a line in SVG like this, which defines a line running diagonally from the upper-left corner of an SVG image toward the lower-right corner. I have also included a second line whose stroke-opacity property is 0.5 as shown in Figure 03.04. (The line is semitransparent, so you can see how that setting affects the rendering of the line.)

Figure 03.04. Two lines created using the SVG <line> element.

Listing 3.6. (Line01.svg) ...

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.