Theory
Theory
Comments

Drawing Polylines

You can draw polylines using the polyline tag. The coordinates of points on the line can be set using the points attribute, just like they can for the polygon.

Code example:

<polyline points="10,135 100,10 55,135 10,10 105,135"/>

Result:

The difference between a polygon and a polyline is in the behavior of the stroke: for a polygon, the stroke is terminated by itself (shape on the left), while for a polyline it remains open (shape on the right):

object.svg
style.css

SVG

CSS

svg { border: 1px solid #dddddd; }

Goalscompleted

Draw a line with the coordinates 50,180 100,20 150,180 20,80 180,80 50,180 100,20.
Set the stroke color to red with a thickness of 5 pixels. To remove the black fill color, set the fill attribute to none.

Drawing Polylines

Comments

Log in

Sign up

Restore access