points

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

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

2つの要素がこの属性を使用しています: <polyline>、および<polygon>

<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座標として定義されます。

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

Value [ number+ ]#
Default value none
Animatable Yes

Example

<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座標として定義されます。

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

Value [ number+ ]#
Default value none
Animatable Yes

Example

<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 Status Comment
Scalable Vector Graphics (SVG) 2
points の定義
勧告候補 Definition for <polygon>
Scalable Vector Graphics (SVG) 2
points の定義
勧告候補 Definition for <polyline>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
points の定義
勧告 Initial definition for <polygon>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
points の定義
勧告 Initial definition for <polyline>