From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Draw a polyline

Draw a polyline - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Draw a polyline

“

- [Instructor] If you want to draw out a series of connected lines, or you have a series of points and you want to draw a line through all the points from start to finish, you use a polyline element. The polyline element starts to cross that border between this is easy to write on your own to you need help from a third-party application to do this, but let's take a look and see exactly how it works. The polyline element has just one attribute, points, and inside points, we define each point on the polyline using a comma-separated list of the x-value and the y-value. So in this example, I have three points. The first one is 20x and 20y, the second 40x and 30y, and so on. When we hand this quote off to the browser, it will find the individual points and then draw a straight line between them from start to finish. What it will not do is draw a line back from the last point to the first point. We'll address that in the next movie. In the exercise files for this movie, I've set up a…

Contents