Description of the <polyline> element

The SVG <polyline> element creates any shape consisting of only straight lines that connect multiple points. Unlike the <polygon> element, the <polyline> creates open shapes.

Example of the SVG <polyline> element:

<!DOCTYPE html>
<html>
 <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="220" >
      <polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser..
    </svg>
  </body>
</html>

Here's a step-by-step process to calculate the numbers in the points attribute of a <polyline> tag:

  1. Decide on the design: Determine the shape you want to create using the polyline. It could be a simple zigzag line, a polygon, or any other series of connected straight-line segments.

  2. Identify the vertices: Identify the positions of the vertices in the design. These are the points where the straight lines connect.

  3. Determine the coordinates: For each vertex, calculate its x and y coordinates based on the SVG coordinate system. You may use graph paper, a design software, or any other method to determine the positions of the vertices in your design.

  4. Format the points attribute: List the coordinate pairs for each vertex in the points attribute, separating the x and y values with commas and each pair with a space.

Example of the SVG <polyline> element with straight lines:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
      Sorry, inline SVG is not supported by your browser.
    </svg>
  </body>
</html>

Attributes

Attribute Description
points This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon.
pathLength This attribute specifies the total length for the path, in user units.

The SVG <polyline> element also supports the Global Attributes and Event Attributes.

Practice Your Knowledge

What attributes can be used with the SVG <polyline> element in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?