SVG Polyline<polyline>

In SVG, the<polyline>element is used to draw polylines, and it is one of the commonly used basic shapes in SVG.

and<polygon>The element is different,<polyline>the lines drawn are not closed, that is, the start point and end point are not automatically connected. Using the<polyline>element, you can create multiple connected line segments, and you can control the vertex coordinates, fill color, border color, and other properties of the line segments by setting attributes.

Basic Syntax

<polyline
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多段线各个顶点的坐标 -->
  fill="none"                      <!-- 多段线的填充颜色，使用 "none" 表示不填充 -->
  stroke="stroke-color"            <!-- 多段线的边框颜色 -->
  stroke-width="width"             <!-- 多段线的边框宽度 -->
/>

Attribute explanation:

• pointsThe attribute defines the coordinates of each vertex of the polyline. The coordinates of multiple vertices are separated by spaces or commas, and each pair of coordinates is separated by a comma.

• fillThe attribute is used to define the fill color of the polyline, usually set to "none" to indicate no fill.

• strokeThe attribute defines the stroke color of the polyline.

• stroke-widthThe attribute defines the stroke width of the polyline.

The following code draws a polyline with a black stroke and a width of 2 pixels. Its vertex coordinates are (50, 50), (100, 150), (150, 100), and (200, 200), forming multiple connected line segments.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 100,150 150,100 200,200" fill="none" stroke="black" stroke-width="2" />
</svg>

Example 1

The <polyline> element is used to create any shape that has only straight lines:

The following is the SVG code:

Click to view:View SVG file。

Example 2

Another example of shapes with only straight lines:

The following is the SVG code:

Click to view:View SVG file。