polygonタグ -SVG内で多角形を描画する｜HTML辞典
<polygon>タグとは？
<polygon> タグは、SVG（Scalable Vector Graphics）内で多角形を描画するためのタグです。points 属性に一連の座標を指定することで、三角形や五角形、星形などの多角形を作成できます。
基本情報
コンテンツモデル
SVG コンテンツ（SVG Content）。
閉じタグの有無
<polygon> は 自己終了タグ（<polygon />）として使用可能 ですが、明示的に <polygon></polygon> の形式で記述することもできます。
基本的な記述方法
<svg width="200" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue" stroke="black" stroke-width="2" />
</svg>
✅ 5 つの点を結んだ青い多角形（星形）が描画されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
points | 多角形の頂点を指定（X, Y の座標をスペースまたはカンマ区切りで記述） | <polygon points="50,10 90,90 10,90"> |
fill | 塗りつぶしの色 | <polygon fill="red"> |
stroke | 枠線の色 | <polygon stroke="black"> |
stroke-width | 枠線の太さ | <polygon stroke-width="3"> |
枠線付きの三角形を描画する
<svg width="200" height="200">
<polygon points="100,10 50,190 150,190" fill="none" stroke="red" stroke-width="3" />
</svg>
✅ 赤い枠線のみの三角形が描画されます。
CSSを使ったデザイン変更
SVG の要素には CSS を適用できます。
polygon {
fill: orange;
stroke: black;
stroke-width: 3;
}
✅ すべての <polygon> 要素にオレンジ色の塗りが適用され、黒い枠線が追加されます。
適切な使用例
✅ points に複数の座標を指定して多角形を描画する
<svg width="200" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue" stroke="black" stroke-width="2" />
</svg>
✅ stroke を指定して枠線付きの多角形を作成する
<svg width="200" height="200">
<polygon points="100,10 50,190 150,190" fill="none" stroke="red" stroke-width="3" />
</svg>
✅ 星形を描画する
<svg width="200" height="200">
<polygon points="100,10 120,80 190,80 130,120 150,190 100,140 50,190 70,120 10,80 80,80" fill="gold" stroke="black" stroke-width="2" />
</svg>
✅ 黄色の星形が描画されます。
適切でない使用例（誤った使い方）
❌ points を指定しない（描画されない）
<!-- NG: points 属性を省略 -->
<svg width="200" height="200">
<polygon stroke="black" stroke-width="2" fill="none" />
</svg>
✅ 正しい書き方（points を指定）
<svg width="200" height="200">
<polygon points="50,10 90,90 10,90" stroke="black" stroke-width="2" fill="none" />
</svg>
❌ <polygon> を <svg> の外に記述する
<!-- NG: <svg> の外に <polygon> を記述 -->
<polygon points="10,50 50,100 90,50" stroke="black" />
<svg width="200" height="200"></svg>
✅ 正しい書き方（<svg> 内に記述）
<svg width="200" height="200">
<polygon points="10,50 50,100 90,50" stroke="black" />
</svg>
<polygon>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<polygon> | 多角形を描画 | points 属性で座標を指定 | 星形や三角形の作成 |
<polyline> | 折れ線を描画 | points 属性で座標を指定 | 折れ線グラフや境界線 |
<line> | 直線を描画 | x1、y1、x2、y2 を指定 | 単純な直線の描画 |
<rect> | 長方形を描画 | x、y、width、height を指定 | 四角形のオブジェクト |
<path> | 任意の図形を描画 | d 属性でパスを指定 | 自由な曲線や形状 |
使用上の注意点
✅ <polygon> は <svg> 内で使用する
- HTML の通常の構造では描画できないため、必ず
<svg>の中に記述する。
✅ points を適切に指定する
- 複数の点を指定しないと描画されない。
✅ fill や stroke を活用してデザインを整える
- 色や枠線を適用して、視認性を向上させる。
関連タグ
<svg>– SVG コンテンツを定義<rect>– 長方形を描画<circle>– 円を描画<ellipse>– 楕円を描画<line>– 直線を描画<polyline>– 折れ線を描画<path>– 任意の図形を描画
まとめ
<polygon> タグは、SVG 内で 多角形を描画するためのタグ です。
適切に使用することで、三角形や星形などのさまざまな形を作成できます。
