Description of the <polyline> element
The SVG <polyline> element creates any shape consisting of only straight lines that connect multiple points. Unlike the <polygon> element, the <polyline> creates open shapes.
Example of the SVG <polyline> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser..
</svg>
</body>
</html>Example of the SVG <polyline> element with straight lines:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Attributes
| Attribute | Description |
|---|---|
| points | This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon. |
| pathLength | This attribute specifies the total length for the path, in user units. |
The SVG <polyline> element also supports the Global Attributes and Event Attributes.
Leave a Reply