点

points 属性定义一个点列表。每个点由一对数字定义，分别表示用户坐标系中的 X 和 Y 坐标。如果属性包含奇数个坐标，最后一个坐标将被忽略。

您可以在以下 SVG 元素中使用此属性

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon is a closed shape -->
  <polygon
    stroke="black"
    fill="none"
    transform="translate(100,0)"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  It is usually considered best practices to separate a X and Y
  coordinate with a comma and a group of coordinates by a space.
  It makes things more readable for human beings.
  -->
</svg>

折线

对于 <polyline>，points 定义一个点列表，每个点代表要绘制的线的顶点。每个点由用户坐标系中的 X 和 Y 坐标定义。

注意：折线是一个开放形状，这意味着最后一个点不与第一个点连接。

值	[ `<number>`+ ]#
默认值	无
可动画	是

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

多边形

对于 <polygon>，points 定义一个点列表，每个点代表要绘制的形状的顶点。每个点由用户坐标系中的 X 和 Y 坐标定义。

注意：多边形是一个封闭形状，这意味着最后一个点与第一个点连接。

值	[ `<number>`+ ]#
默认值	无
可动画	是

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon is an closed shape -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

规范

规范
可缩放矢量图形 (SVG) 2 # PolygonElementPointsAttribute
可缩放矢量图形 (SVG) 2 # PolylineElementPointsAttribute