SVGのpolygonで生成した正三角形の回転の中心を比較

SVGのpolygonで正三角形を生成し、その三角形の中心を回転の中心と重ねています。

三角形の中心点の座標(x,y)は(x1+x2+x3)/3 , (y1+y2+y3)/3 で得られるので、polygonを生成する際のpointsの値をそのまま利用できます(今回はプログラム処理ではなく計算された値を手入力してあります)。

CSSの立体化で正三角形を組み立てて、正四面体や正二十面体などする際には、まず中心と合わせてやるとあとの作業が捗ります。

↓以下が実際のソースサンプルです。

▼JavaScript


▼CSS


▼HTML

デモページは、こちら