ピラミッドを垂直回転させてみましょう。
下のViewbox内でマウスを押下した状態で上下に動かしてみて下さい。奥行方向がy軸方向で手前方向がマイナスです。また回転は前方が下がる方向がマイナスの角度です。
ピラミッドのサイズは横(x) x 縦(y) x 高さ(z) = 200 x 200 x 100 pxです。
各面の表示順は背面、左右の面、前面の順番です。
陰面処理をしていないので、背面(青色）が他の面よりも前面になった時でも背面が隠れてしまいます。
135°～ -135°の間は正しく表示されます。とりあえずここでは0°～-90°で正しく表示できれば良しとします。
各頂点の座標の計算は、初期の座標に対して回転角度による3Dのビュー変換(座標変換を参照)を計算して、各頂点にセットしています。
初期の座標を記憶しておく方法は色々ありますが、ここでは以下のようにpathノードの中にpointsという本来含まれない属性（pointsとは別の名前でもよい）を記述し、その中に各点のx、y、z座標の値を入れておきます。順番はdに設定されている頂点の順番と同じにしておきます。
<path id="angle4" d="M 0,100 L -100,0 100,0" fill="#F00"
points="0,0,100 -100,-100,0 100,-100,0"/>
投射図を計算する場合はgetAttributeメソッドで
var attrPoints = angle.getAttribute("points");
というようにしてpoints全体の値を取得します。
他に各点の記憶方法として他にいい方法があればその方法でもかまいません。
pointsの値を取得後、1回目のsplitメソッドで各点に分け、2回目のsplitメソッドでx,y,zの各値を取得し回転角度を用いて3Dアフィン変換を行います。
三角形を形成するタグpathのdの内容はNode.pathSegList.getItem(index)でindexの値を0から順番インクリメントして各点のSVGPathSeg属性のオブジェクトを得ることができます。各点のデータは例えば各点のSVGPathSeg属性をpointとすると x = point.x、y = point.yとして得られます。
今回は上下方向だけの回転なので、図形を変形するためにはpoint.yの値を変更するだけです。
point.y = 変形後の値
属性の値を変更すると直ちにSVGに反映されます..........?
ところがIEの場合変更が反映されません。W3Cの仕様では以下のようになっています。
8.5.21 Interface SVGPathSegList
の中で
SVGPathSeg getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
![[a羅針盤]](image/pukiwiki.png "[a羅針盤]")
