SVG Transform
SVG の transform 属性は translate/scale/rotate/skew/matrix による座標変換を記述し、要素とその子孫に適用される。
目的
アニメーション、レイアウト、座標系の変換に向けて、SVG 要素にアフィン変換（平行移動・拡大縮小・回転・傾斜）を適用する。
メカニズム
transform="translate(x,y) scale(sx,sy) rotate(a,cx,cy) skewX(a) skewY(a) matrix(a,b,c,d,e,f)" の形式で指定する。変換は右から左へ合成され、matrix(a,b,c,d,e,f) は 2x3 のアフィン行列に対応する。
ユースケース
- SVG グラフィックの変換
- アニメーション変換
- 座標系のマッピング