javascript - Understanding Matrix in SVG -

i need in deep understanding of matrix in svg. know matrix, want rotate , scale without using scale or rotate word. want use transform='matrix(a,b,c,d,e,f)'. know 'a/d' value determine scale, 'e/f' determines position. tan(b),tan(c) determines skew. cos(a),sin(b),-sin(c),cos(d) determines angle.but want know how work, need thoroughly in understanding matrix in svg.

matrix operations composed of individual, "local" transformations (i.e. translate, rotate, scale, skew) matrix concatenation (i.e. multiplication).

for example, if want rotate object r degrees around point (x, y), translate (x, y), rotate r degrees, translate original position (-x, -y).

by referred "chaining" (as described above) each successive "local" transformation combined produce result. therefore, @ location in chain of transformations, "local" transformation space (at location) composed of operations came before.

what implies when transforming parameter of svg element (i.e. translate) transform applied it's current transformation space. so, example if element rotated 30 degrees, translation of (8, 5) not go 8 right , 5 up, go rotation of (8, 5) 30 degrees - relative current position.

so bit of gotcha.

one way deal complication decompose transformation matrices individual, total transformations (i.e. total translation, total rotation/skew, total scale), decomposition says nothing individual basic transformations went combined totals, nor of order in occurred. problem because 2d transformations not commutative, e.g. translate(x, y)->rotate(r) not same rotate(r)->translate(x, y).

the best way i've found compose transformations in order , keep track of totals in order, when new transformation introduced, used totals have been tracked, update 1 being modified , recompose entire transformation.

like so: (pseudo-code)

// edit: initialize components (new svgmatrix returns identity matrix) var transx=0, transy=0, rot=0, scax=0, scay=0, skwx=0, skwy=0, matrix = new svgmatrix();  // example rotate function rotate(svgel, angle){     rot = rot + angle;     updatetransform();     applytransform(svgel); };  function updatetransform(){     // order i've found convenient     // (others may differently)     matrix.translate(transx, transy);     matrix.rotate(rot);     matrix.scale(scax, scay);     matrix.skewx(skwx);     matrix.skewy(skwy); };  function applytransform(el){     el.transform = matrix; }; 

to clear, not suggesting matrices not way of representing transformations, nor suggesting better way - far it.

transformation matrices powerful tool, , when used appropriately, effective @ handling complex animations, not trivial use in cases.

this may bit advanced, more information animations using matrix transformations, short code example provides wealth of information , references start from.

http://www.w3.org/tr/2011/wd-css3-2d-transforms-20111215/#matrix-decomposition