SVG Polyline

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>

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.




Do you find this helpful?

Related articles