等角投影法

Z X Y 30° 30° 120° 120° 120° SVGの代替画像
立体を平面で表す図法の一つです。

SVGによる描画方法

SVGはXY座標で描画できますが、3Dを描画するにはXYZ座標が必要となります。
3D点P(x,y,z)を投影図上の点(sx,sy)に変換する式は以下の通りとなります。


投影図の例えばZX面(側面)のみの描画であればSVGで図形を変形させれば意外と簡単に描画できます。
Yの値が0で固定の場合、X軸を左回りで30度傾け、Xの倍率をcos(30)、YはSVGの座標が上から下に向かってY方向の座標が増えることから数学で使われる上に向かって増える座標にするため-1を指定しています。
transform="translate(0,0) skewY(-30) scale(0.866,-1)
図形を変形させる方法は、円など投影図で表現すると傾いた楕円となるケースでも単純に円を描画すれば良いので楽です。
例えばZX面に四角(20,0,30),(20,0,70) (50,0,70) (50,0,30)を描画する場合はグループを使えば以下のように記述できます。
<g transform="translate(0,0) skewY(-30) scale(0.866,-1)">
    <rect x="20" y="30" width="30" height="40" stroke="black" fill="none" />
    <circle cx="35" cy="70" r="15" stroke="black" fill="none" />
    <rect x="20" y="55" width="30" height="30" stroke="black" fill="none" />
</g>
下図の黒い図形が上記ソースの結果です。
Z X Y SVGの代替画像
Yが0でない場合は、Y=0の時の図形をYのずれ分だけ移動させれば描画できます。
translateで指定する値を以下の式で計算します。


上式にx=0,z=0を代入すると

transform="translate(sx,sy) skewY(-30) scale(0.866,-1)
例えばZX面に四角(20,100,30),(20,100,70) (50,100,70) (50,100,30)を描画する場合は以下のように記述できます。

<g transform="translate(-86,-50) skewY(-30) scale(0.866,-1)">
    <rect x="20" y="30" width="30" height="40" stroke="red" fill="none" />
</g>
上図の赤の四角形が上記のソースの結果です。