正五角形を描くのには、直交座標系で正五角形の頂点を指定すればいい。 正五角形の内角は 108° であるからこれを利用する。 ただこれには sin 108° や cos 108° の値を求めなければならず、 これらを導くのが少し難しく、実際自分で一から導く自信がない。 そこで、 sin 108° や cos 108° の値を知らなくてもよい正五角形の書き方を考えてみた。
まず、右の図で底辺にあたる線分 CD はどちらもピクセル単位の整数で書ける。C(-50,100), D(50,100)
とすれば線分 AB は次で書ける。
<line x1="-50" y1="100" x2="50" y2="100" stroke="black" stroke-width="1" />
次に線分 BC を描こう。線分 BC は線分CD を 108° 反時計回りに回転させることで得られる。これは、
SVG の transform 属性で得られる。具体的には、
<line x1="-50" y1="100" x2="50" y2="100" stroke="black" stroke-width="1" transform="rotate(-108, -50, 100)" />
と指定すればいい。最初の引数は degree を単位とする回転角で、時計回りが正である。
第2、第3の引数は回転中心のそれぞれ x 座標、y座標である。同様に線分DE は次で書ける。
<line x1="-50" y1="100" x2="50" y2="100" stroke="black" stroke-width="1"
transform="rotate(108, 50, 100)" />
問題は AB と EA である。これらの端点は x 座標も y 座標も無理数である。
ということで、線分 BA は 点 B を中心にして BC を反時計回り 108° 傾けた線分であることを利用して、
次のように書いてみた。
<line x1="-50" y1="100" x2="50" y2="100" stroke="black" stroke-width="1"
transform="rotate(-108,-50,100)rotate(-108,50,100)" />
この transform 属性、rotate(-108,-50,100)rotate(-108,50,100) のように、
二重に rotate をしているのがミソである。まず最初の（左側の）rotate は、
点 C の回りに反時計回りに 108° 回していることを意味している。
次の（右側の） rotate は点 B のまわりに反時計回りに 108° 回していることを意味している。というのは、
右側の rotate の(50,100)という座標は、CB の回転後の座標であるからだ。
CB の回転前は CD であり、D の座標は(50,100) だった。ということは、回転した後の座標の B も、
(50, 100)となるからだ。
同様にして線分 EA も次のように書ける。
<line x1="-50" y1="100" x2="50" y2="100" stroke="black" stroke-width="1"
transform="rotate(108,50,100)rotate(108,-50,100)" />
正五角形の次は星形である。星形の場合は sin 36° や cos 36° の値が必要だが、 これらの値を知らなくてもよい書き方を考えてみた。これも正五角形と考え方は同じだ。最初に線分 BE の位置を決めて、次に線分 BD と線分 CE を描き、最後に線分 AC と線分 AD を描いて完成だ。
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_04.htm
https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Basic_Transformations
まりんきょ学問所 ＞ コンピュータの部屋 ＞ マーク付け言語手習い ＞ SVG と変形
