SVGによる描画方法

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

Z X Y SVGの代替画像
円の方程式





半径rの円の場合


次の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の円は以下の式で表せます。


この円をα回転させる場合を考えます。
xy面上の点(x,y)をα回転させるとz座標は

となります。回転後の水平成分x1は

となります。yはそのままです。

以上より回転後の座標は(x1,y1,z1)となります。
円の場合、以下のとおりです。



上記を投影すると以下のようになります。


変形機能を使用した場合、回転角45度の場合は、以下のように記述できます。 ×は、変形機能を使わずに描画した例です
<g transform="translate(0,0) rotate(-60)  scale(1.21,-1)">
Z X Y SVGの代替画像