tomo.mobi

Representation design of material


SVG内の<path/>の位置設定

<path/>の位置を設定するときstyleのtransform:matrix3d()を使うと良いのですが、なんだかtransform:matrix3d()の仕様が複雑なのでメモ書きを残します。
参考文献:http://www.htmq.com/css3/transform_matrix3d.shtml

平行移動のみで、回転・拡大縮小をしない場合

var _x = Math.random()*400;
var _y = Math.random()*400;
var _z = 1;
path.setAttribute('style', 'transform:matrix3d(1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,'+ _x + ',' +  _y + ',' +  _z + ', 1)');

これも足して・・・。

Z軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
Math.cos(角度値), Math.sin(-角度値), 0, 0, 
Math.sin(角度値), Math.cos(角度値), 0, 0, 
0, 0, 1, 0, 
0, 0, 0, 1 
)

拡大縮小も足した。
黒枠の中をクリックした時に雪の結晶がスタンプされるのですが、調節不十分なため座標がたまにviewBoxから外れる時があります。
http://tomo.mobi/test/greensock/star_position.html

やっぱり、何か作る材料をそろえるのが一番時間かかる。
もっと、まともな物を作れるようになりたいな・・・