Graphery SVG

# polyline

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.

Usually, this element is created with:

const polyline = parentElement.add('polyline')

It's possible to create it as a disconnected element with gySVG('polyline') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

# .points()

polyline.points( points )

Set this attribute that defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline

  • argument: {Array|string} points The list of points

  • returns: {gySVGObject} The original object

const points = element.points();

Get the points current value.

  • returns: {Array|string}

# .pathLength()

polyline.pathLength( length )

Set this attribute lets specify the total length for the path, in user units.

  • argument: {number} length The total length for the path

  • returns: {gySVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength current value.

← radialGradient →