svg transform座標変換方式

911 ワード

座標変換の使用方法:
コード:
<g transform="...">  <!--other elements>  ...</g>

1、平行移動変換(translate)
平行移動式transform="translate(x,y)",すなわち新しい座標系の原点は元の座標系の(x,y)にあります.座標軸の方向は変わりません.
2、回転変換(rotate)
transform="rotate(angle cx,cy)".angleは回転角度を表し、デフォルトの単位は「度」で、瞬時針は正、反時計回りは負です.(cx,cy)は、回転中心がある座標です.回転中心座標を省略すると、デフォルト値は(0,0)です.
3、伸縮変換(scale)
transform=「scale(sx,sy)」,sx,syはそれぞれx軸方向とy方向の引張りまたは縮小のスケール係数を表す.ストレッチ:1より大きい;縮小:1未満.sy,すなわちsy=sxを省略すると,等比例スケーリングを行う.
4、スキュー変換(skew)
transform="skewX(x-angle)"またはtransform="skewY(y-angle)",x-angle,y-angleはそれぞれx軸とy軸に沿って歪む角度を表す.
5、マトリックス変換(matrix)
transform=「matrix(a b c d e f)」で、ここで6つのパラメータはそれぞれ変換マトリクスの6つのパラメータです.柔軟性が高く、どんなに複雑な変換でもマトリクス演算を1回行うだけで済むのが特徴です.
2 D座標変換の基本式:
     x a c e x1
y = b d f * y1
     1 0 0 1  1
ここで、x,yは旧座標、x 1,y 1は新座標である.