points

points 属性は、点のリストを定義します。各点は、ユーザー座標系における X 座標と Y 座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。

この属性は次の SVG 要素で使用できます。

例

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

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline は開いた図形となる -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon は閉じた図形となる -->
  <polygon
    stroke="black"
    fill="none"
    transform="translate(100,0)"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  通常、 X と Y をカンマで、座標群をスペースで区切るのが
  ベストプラクティスとされます。
  その方法はコードを人間にとって読みやすいものにしてくれます。
  -->
</svg>

polyline

<polyline>の場合、 points で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。

メモ: polyline は最初の点と最後の点が接続されない開いた図形となります。

値	[ `<number>`+ ]#
既定値	none
アニメーション	可

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

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline は開いた図形となる -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

polygon

<polygon>の場合、points で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系の X 座標と Y 座標として定義されます。

メモ: polygon は最初の点と最後の点が接続された閉じた図形となります。

値	[ `<number>`+ ]#
既定値	none
アニメーション	可

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

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon は閉じた図形となる -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute
Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute