---
title: polygon
slug: Web/SVG/Element/polygon
translation_of: Web/SVG/Element/polygon
---
<div>{{SVGRef}}</div>

<p><strong><code>&lt;polygon&gt;</code></strong>要素は、直線のセグメントのつながりで構成された閉じた図形を定義します。最後の点は最初の点と結ばれます。開いた図形については{{SVGElement("polyline")}}要素をご覧ください。</p>

<h2 id="使える場所">使える場所</h2>

<p>{{svginfo}}</p>

<h2 id="属性">属性</h2>

<h3 id="グローバル属性">グローバル属性</h3>

<ul>
 <li><a href="/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li>
 <li><a href="/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li>
 <li><a href="/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li>
 <li><a href="/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性 </a> »</li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h3 id="専用属性">専用属性</h3>

<ul>
 <li>{{SVGAttr("points")}}</li>
</ul>

<h2 id="DOMインターフェイス">DOMインターフェイス</h2>

<p>この要素は{{domxref("SVGPolygonElement")}}インタフェースを実装します。</p>

<h2 id="例">例</h2>

<h3 id="SVG">SVG</h3>

<pre class="brush: html">&lt;svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/&gt;
&lt;/svg&gt;</pre>

<h3 id="結果">結果</h3>

<p>{{EmbedLiveSample("Example", 120, 120)}}<br>
» <a href="https://developer.mozilla.org/files/3259/polygon.svg">polygon.svg</a></p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>



<p>{{Compat("svg.elements.polygon")}}</p>

<h2 id="関連情報">関連情報</h2>

<ul>
 <li>{{SVGElement("polyline")}}</li>
</ul>