polyline

< svg‎ | elements
Jump to: navigation, search

polyline

W3C Recommendation

Summary

The poyline 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

View live exampleIn 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>

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

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

Specification Status Related Changes
The 'polyline' element W3C Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support Supported (when?)
Supported (when?)
9.0
Supported (when?)
3.2

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 3.0
7.0
Supported (when?)
Supported (when?)
10
Supported (when?)
5.0
Supported (when?)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]

{{