Firefox Tomorrow

svg element

<polyline>

View on MDN ↗

The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn’t have to be connected to the first point. For closed shapes see the <polygon> element.

Usage context

Attributes

  • points
    • : This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline Value type: <number>+; Default value: ""; Animatable: yes
  • pathLength
    • : This attribute lets specify the total length for the path, in user units. Value type: <number>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGPolylineElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with the default fill -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polyline shape with stroke and no fill -->
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also