Web/SVG/Element/polygon を更新

2021/03/25 時点の英語版に同期

1 files changed, 68 insertions, 47 deletions

diff --git a/files/ja/web/svg/element/polygon/index.html b/files/ja/web/svg/element/polygon/index.html
index 524d9c87fb..5613f69882 100644
--- a/files/ja/web/svg/element/polygon/index.html
+++ b/files/ja/web/svg/element/polygon/index.html
@@ -1,64 +1,76 @@
 ---
-title: polygon
+title: <polygon>
 slug: Web/SVG/Element/polygon
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Graphics
 translation_of: Web/SVG/Element/polygon
 ---
 <div>{{SVGRef}}</div>
 
-<p><strong><code>&lt;polygon&gt;</code></strong>要素は、直線のセグメントのつながりで構成された閉じた図形を定義します。最後の点は最初の点と結ばれます。開いた図形については{{SVGElement("polyline")}}要素をご覧ください。</p>
+<p><strong><code>&lt;polygon&gt;</code></strong> 要素は、接続された一連の直線の区間で構成される閉じた図形を定義します。最後の点は最初の点と結ばれます。</p>
 
-<h2 id="使える場所">使える場所</h2>
+<p>開いた図形については {{SVGElement("polyline")}} 要素をご覧ください。</p>
 
-<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>
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
 
-<h3 id="専用属性">専用属性</h3>
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- 既定で塗りつぶす多角形の例 --&gt;
+  &lt;polygon points="0,100 50,25 50,75 100,0" /&gt;
 
-<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;!-- 同じ多角形で線を持ち塗りつぶされない例 --&gt;
+  &lt;polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" /&gt;
 &lt;/svg&gt;</pre>
 
-<h3 id="結果">結果</h3>
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Attributes">属性</h2>
+
+<dl>
+ <dt>{{SVGAttr('points')}}</dt>
+ <dd>この属性は多角形を描くのに必要な点 (絶対座標の <code><var>x</var>,<var>y</var></code> の組) のリストを定義します。<br>
+ <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#number"><strong>&lt;number&gt;</strong></a>+ ; <em>既定値</em>: <code>""</code>; <em>アニメーション</em>: <strong>可</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>This attribute lets specify the total length for the path, in user units.<br>
+ <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#number"><strong>&lt;number&gt;</strong></a> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>可</strong></small></dd>
+</dl>
+
+<h3 id="Global_attributes">グローバル属性</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt>
+ <dd><small>特に重要なもの: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt>
+ <dd><small>特に重要なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>イベント属性</dt>
+ <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#global_event_attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#graphical_event_attributes">グラフィックイベント属性</a></small></dd>
+ <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt>
+ <dd><small>特に重要なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA 属性</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">使い方メモ</h2>
 
-<p>{{EmbedLiveSample("Example", 120, 120)}}<br>
-» <a href="https://developer.mozilla.org/files/3259/polygon.svg">polygon.svg</a></p>
+<p>{{svginfo}}</p>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
   <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
   </tr>
  </thead>
  <tbody>
@@ -70,19 +82,28 @@ translation_of: Web/SVG/Element/polygon
   <tr>
    <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
    <td>{{Spec2('SVG1.1')}}</td>
-   <td>初期定義</td>
+   <td>初回定義</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
 
 
 <p>{{Compat("svg.elements.polygon")}}</p>
 
-<h2 id="関連情報">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>{{SVGElement("polyline")}}</li>
+ <li><strong>他の SVG 基本図形: </strong>
+
+  <ul>
+   <li>{{ SVGElement('circle') }}</li>
+   <li>{{ SVGElement('ellipse') }}</li>
+   <li>{{ SVGElement('line') }}</li>
+   <li>{{ SVGElement('polyline') }}</li>
+   <li>{{ SVGElement('rect') }}</li>
+  </ul>
+ </li>
 </ul>