polyline element | SVGPolylineElement object

Defines a series of connected lines by using (x,y) coordinate values with fill, stroke, and stroke-width styles.

Scalable Vector Graphics: Basic Shapes, Section 9.8.6Internet Explorer 9

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGPolylineElement

Members

The SVGPolylineElement object has these types of members:

Events

The SVGPolylineElement object has these events.

EventDescription
onload

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

 

Methods

The SVGPolylineElement object has these methods.

MethodDescription
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.

 

Properties

The SVGPolylineElement object has these properties.

PropertyDescription

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. Starting with IE11, this property also has basic support for HTML elements (see "Remarks" section).

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.

 

Standards information

Remarks

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

Typically, polyline elements define open shapes.

Note  You cannot provide an odd number of coordinates.

Examples

In the following code example, the polyline element is used to draw a gold polyline inside an inline SVG element. Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see a gold polyline.

It should look like this:

polyline element example


<!DOCTYPE HTML>
<html>
	
  <head>
  </head>
	
  <body>
    <svg width="400" height="400">
      <polyline points="50,50 150,120 100,220 200,150" style="fill:white; stroke:gold; stroke-width:10" />
    </svg>
  </body>
</html>
	

 

 

Show:
© 2014 Microsoft