SVG Polyline
SVG Polyline （SVG折线）
Description of the <polyline> element
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。）
</svg>
</body>
</html>
Here’s a step-by-step process to calculate the numbers in the points attribute of a <polyline> tag:
Decide on the design: Determine the shape you want to create using the polyline. It could be a simple zigzag line, a polygon, or any other series of connected straight-line segments.Identify the vertices: Identify the positions of the vertices in the design. These are the points where the straight lines connect.Determine the coordinates: For each vertex, calculate its x and y coordinates based on the SVG coordinate system. You may use graph paper, a design software, or any other method to determine the positions of the vertices in your design.Format the points attribute: List the coordinate pairs for each vertex in the points attribute, separating the x and y values with commas and each pair with a space.
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。）
</svg>
</body>
</html>
Attributes
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.