---
title: points
slug: Web/SVG/Attribute/points
translation_of: Web/SVG/Attribute/points
---
<div>{{SVGRef}}</div>

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

<p>2つの要素がこの属性を使用しています: {{SVGElement("polyline")}}、および{{SVGElement("polygon")}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>

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

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

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

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<h2 id="polyline">polyline</h2>

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

<p class="note"><strong>Note:</strong> polyline は最初の点と最後の点が接続されない開いた図形となります。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td>[ {{cssxref("number")}}+ ]#</td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><em>none</em></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="Example">Example</h3>

<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>

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

<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p>

<h2 id="polygon">polygon</h2>

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

<p class="note"><strong>Note:</strong> polygon は最初の点と最後の点が接続された閉じた図形となります。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td>[ {{cssxref("number")}}+ ]#</td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><em>none</em></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
 </tbody>
</table>

<h3 id="Example_2">Example</h3>

<div class="hidden">
<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
</div>

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

<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Definition for <code>&lt;polygon&gt;</code></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Definition for <code>&lt;polyline&gt;</code></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition for <code>&lt;polygon&gt;</code></td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition for <code>&lt;polyline&gt;</code></td>
  </tr>
 </tbody>
</table>