點

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