polygonタグとは何か？
svgタグのpolygonタグは、複数の頂点を直線で結んだ「閉じた多角形」を描くための要素です。
三角形や五角形、星形などを作りたい場合に使います。
polygonタグの使い方（pointsとfill）
polygonタグは「points」属性を使って頂点となる（x,y）座標のペアを指定していきます。
ペアの指定が３つなら三角形、４つなら四角形、５つなら五角形になります。
なお、最後の頂点は自動的に最初の頂点と結ばれるので、明示的に閉じる必要はありません。
中の色はfill属性を使って指定します。
<svg>
<polygon points="x1,y1 x2,y2 ,,,," fill="#000000" />
</svg>
例えば、頂点が(10, 110)、(100,10)、（190,110）の 二等辺三角形であれば以下のように記述します。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon points="10,110 100,10 190,110" fill="hotpink" />
</svg>外線を描く方法
SVGタグの中で使えるpolygonタグなどでは、外線を描くこともできます。
外線を描くために使うコードは以下のようなものです。
- stroke: 線の色を指定する（デフォルトはnone）
- stroke-width: 線の太さ
- stroke-dassharry: 破線のパターン
- stroke-dashoffset: 破線の開始位置をシフトさせる
例えば、先ほどの三角形に5pxの青色の線を引く場合は以下のようにします。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon points="10,110 100,10 190,110" fill="hotpink"
stroke="skyblue" stroke-width="5px"/>
</svg>線を破線にする場合は、stroke-dasharrayを使います。stroke-dasharrayは値を（実線の長さ, 空白の長さ）というパターンで指定します。
例えば、実線40pxの後に空白10pxのパターンを繰り返す場合は stroke-dasharray=”40 10″ と記述します。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon points="10,110 100,10 190,110" fill="hotpink"
stroke="blue" stroke-width="5px"
stroke-dasharray="40 10" />
</svg>stroke-dasharrayの値を数値１つにすると、実線と空白の長さが２つとも指定した長さになります。例えば、stroke-dasharray=”10%” だと、10%の実線と空白を繰り返します。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon points="10,110 100,10 190,110" fill="hotpink"
stroke="blue" stroke-width="7px"
stroke-dasharray="10%" />
</svg>stroke-dasharray=”10 40 30 10″のように繰返しのパターンをより細かく指定することもできます。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon points="10,110 100,10 190,110" fill="hotpink"
stroke="blue" stroke-width="7px"
stroke-dasharray="10 40 30 10" />
</svg>polygonタグで星形を作る方法
polygonタグを使って星形を作ることもできます。
星形を作成するためには、外側➙内側➙外側…のように、頂点を一つ一つ指定していきます。（頂点はぜんぶで10座標です）
<svg width="200" height="200" viewBox="-100 -100 200 200">
<polygon points="
0,-90 23,-30 90,-30
37,10 58,80 0,40
-58,80 -37,10 -90,-30 -23,-30"
fill="#ffeb3b" stroke="#f57f17" stroke-width="3"/>
</svg>頂点を動的に変更する
JavaScriptを使うとpolygonタグの頂点を動的に変更することもできます。（図形の下のスライダーを動かしてみてください）
<svg id="svg" width="300" height="300" viewBox="-150 -150 300 300">
<polygon id="poly-move" fill="#ffd" stroke="#b55" stroke-width="4" stroke-linejoin="round"/>
</svg>
<div>
<label>頂点の数を選択してください：
<input id="poly-n" type="range" min="3" max="20" value="5"/>
<p>（現在の頂点の数：<span id="poly-current-n"></span>）</p>
</label>
</div>
<script>
const poly = document.getElementById('poly-move');
const nInput = document.getElementById('poly-n');
const currentN = document.getElementById('poly-current-n');
function regularPolygonPoints(n, radius=100, cx=0, cy=0, rotation=-90) {
const pts = [];
for (let i = 0; i < n; i++) {
const angle = (2 * Math.PI * i) / n + rotation * Math.PI / 180;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
pts.push(`${x.toFixed(2)},${y.toFixed(2)}`);
}
return pts.join(' ');
}
function update() {
const n = +nInput.value;
poly.setAttribute('points', regularPolygonPoints(n));
currentN.textContent = n; // ← ここで表示更新
}
nInput.addEventListener('input', update);
update();
</script>①regularPolygonPoints(n, radius=100, ...)
この関数は、スライダーで指定した数値（n）の数だけ頂点を持つ正多角形の座標を計算し、points属性の値として、(x,y)のペアを文字列として返すものです。
forループでn回（頂点の数だけ）繰り返します。angleの計算式は、円をn等分した角度を求め、それにrotation（デフォルトでは-90度）を加えることで、多角形の上端が真上（y軸）に来るように調整しています。Math.cos(angle)とMath.sin(angle)を使って、三角関数により各頂点の(x, y)座標を計算します。pts.push(...)で、計算した座標を"x,y"の形式で配列に格納します。toFixed(2)で小数点以下2桁に丸めています。- 最後に
pts.join(' ')で、"x1,y1 x2,y2 ..."という形式の文字列にして返します。
②update()
update関数はスライダーで頂点の数nが変更されたときに、多角形を更新するためのものです。
const n = +nInput.value;で、スライダーの現在の値（文字列）を数値に変換してnに代入します。poly.setAttribute('points', regularPolygonPoints(n));で、regularPolygonPoints関数が生成した座標文字列をpolygon要素のpoints属性に設定します。これにより、多角形の形状が変更されます。
+nInput.value; の行にあるプラス記号 (+) は、単項プラス演算子と呼ばれるもので、文字列を数値に変換するために使われます。
inputに入力された、valueプロパティは数字であっても常に文字列として取得されます。例えば、スライダーの値が 5 であっても、nInput.value の値は数値の 5 ではなく、文字列の "5" になります。
このままでは、regularPolygonPoints 関数の引数として期待される数値 n として使えないため、単項プラス演算子 + を使って、文字列を数値に変換する処理を行っています。
③nInput.addEventListener('input', update)
これは、スライダー(nInput)が操作されるたびにupdate関数を実行するinputイベントです。
inputイベントは、inputタグの入力値（スライダーの値）が変わるたびに発生します。- inputイベント検知したら、
update関数を実行します。
CSSで線を動かす（ついでにホバーで色を変える）
polygonタグに対してCSSを使うことで線を動かすこともできます。
例えば、以下のような青い線の三角形があるとします。
<svg width="200" height="120" viewBox="0 0 200 120">
<polygon id="triangle-line" points="10,110 100,10 190,110" fill="none" stroke="#06f" stroke-width="3" />
<svg>
