polyline

Summary

The polyline element is a SVG basic shape to create a series of lines connecting several points. Usually, a polyline is used to create open shapes.

Overview Table

DOM Interface: SVGPolylineElement

Examples

In the following code example, the polyline element is used to draw a gold polyline inside an inline SVG element.



<svg width="400" height="400"  version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 150,120 100,220 200,150" stroke="gold" stroke-width="1" fill="none" />
</svg>

[View live example](http://code.webplatform.org/gist/37caee51f773695efdd4)

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

Typically, polyline elements define open shapes. Note: You cannot provide an odd number of coordinates.

Attributes

Global attributes

Specific attributes

points

DOM Interface

This element implements the SVGPolylineElement interface.

Members

The SVGPolylineElement object has these events:

onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGPolylineElement object has these methods:

getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
hasExtension: Determines if the specified extension is supported.

The SVGPolylineElement object has these properties:

animatedPoints: Gets or sets the animated contents of the points attribute.
className: Gets the names of the classes that are assigned to this object.
clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
fill: Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
fillOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
fillRule: Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
marker: Sets or retrieves a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
markerEnd: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
markerMid: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
markerStart: Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
mask: Sets or retrieves a value that indicates a SVG mask.
nearestViewportElement: Gets a value that indicates which element established the current viewport.
ownerSVGElement: Gets the nearest ancestor svg element.
pointerEvents: Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
points: Gets or sets the static contents of the points attribute.
requiredExtensions: Gets a white space-delimited list of required language extensions.
requiredFeatures: Gets or sets a white space-delimited list of feature strings.
stroke: Sets or retrieves a value that indicates the color to paint along the outline of a given graphical element.
strokeDasharray: Sets or retrieves one or more values that indicate the pattern of dashes and gaps used to stroke paths.
strokeDashoffset: Sets or retrieves a value that specifies the distance into the dash pattern to start the dash.
strokeLinecap: Sets or retrieves a value that specifies the shape to be used at the end of open subpaths when they are stroked.
strokeLinejoin: Sets or retrieves a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
strokeMiterlimit: Sets or retrieves a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
strokeOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to stroke the current object.
strokeWidth: Sets or retrieves a value that specifies the width of the stroke on the current object.
style: Gets a style object.
systemLanguage: Gets or sets a comma-separated list of language names.
transform: Gets the value of a transform attribute.
viewportElement: Gets the element that established the current viewport.
xmlbase: Gets or sets the base attribute on the element.
xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.

Related specifications

The ‘polyline’ element: W3C Recommendation

{{

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]