SVGにより簡易等角投影法で円を描画

icon 項目のみ表示/展開表示の切り替え

SVGによる描画方法

変形機能を用いてXY面に描画

Z X Y SVGの代替画像
円の方程式
x=r \cos(\theta)
y=r \sin(\theta)
z=0
sx=r \cos(\theta) \cos(30) - r \sin(\theta) \cos(30)
sy=r \cos(\theta) \sin(30) + r \sin(\theta) \sin(30)+z
半径rの円の場合
rx=r \cos 30 \sqrt 2=\frac{r}{\sqrt 2}
ry=r \sin 30 \sqrt 2=r \frac{\sqrt 3}{2} \sqrt 2=r \sqrt \frac{3}{2}
次の2行のいずれかの行で変形をかければcircleでXY面に描画できる。 
<g transform="translate(0,0) rotate(-30) skewX(30) scale(1,-0.866)">
<g transform="translate(0,0) skewY(-30) skewX(270) scale(1.1)">
以下にXY面に中心(0,0,0)、半径100の円を描画する例を示します。
赤色が変形機能で描画した場合、×は、変形機能を使わずに描画した例です。 
<g transform="translate(0,0)  skewY(-30) skewX(270) scale(1.1)">
    <circle cx="0" cy="0" r="100"  stroke="green" fill="none"/>
</g>

XY面の円をY軸を軸に回転させる

原点からの距離を変化させずに回転させる必要があります。
XY面の半径rの円は以下の式で表せます。
x=r \cos(\theta)
y=r \sin(\theta)
この円をα回転させる場合を考えます。
xy面上の点(x,y)をα回転させるとz座標は
z1=x \sin \alpha
となります。回転後の水平成分x1は
x1=x \cos \alpha
となります。yはそのままです。
y1=y
以上より回転後の座標は(x1,y1,z1)となります。
円の場合、以下のとおりです。
x1=r \cos(\theta)\cos \alpha
y1=r \sin(\theta)
z1=r \cos(\theta)\sin \alpha
上記を投影すると以下のようになります。
sx=(r \cos(\theta)\cos \alpha) \cos(30)-(r \sin(\theta)) \cos(30)
sy=(r \cos(\theta)\cos \alpha) \sin(30)+(r \sin(\theta)) \sin(30)+(r \cos(\theta)\sin \alpha)
変形機能を使用した場合、回転角45度の場合は、以下のように記述できます。 ×は、変形機能を使わずに描画した例です 
<g transform="translate(0,0) rotate(-60)  scale(1.21,-1)">
Z X Y SVGの代替画像