Decomposing svg transformation matrix

Question

I have a polyline(1) that is withing group that is within another group. Both of these groups are transformed in every way. I need to get the exact locations of the polyline points after the transformations but it isn't easy since there is only transform attribute at hand. I'm trying to replicate these transformations to another polyline(2) so I would get the transformed point locations. I get the globalMatrix from the polyline(1) and with the help of this: http://svg.dabbles.info/snaptut-matrix-play and Internet, I've come to this: http://jsfiddle.net/3c4fuvfc/3/

It works if there isn't any rotation applied. If rotation is applied then all the points are a little off. Of course the scaling isn't done yet, maybe it fixes this issue? And then there is the issue of scaling: polyline(1) is sometimes flipped around ( typically s-1,1 or s1,-1). How is scaling supposed to be implemented here? Is it important in which order these are done when trying to replicate transformations? Is the decomposing done right, this seems odd:

scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d), 

Thank you

Answer 1

I'm not sure if I'm misunderstanding the problem, but you seem to be doing a lot of work for information you already have.

You have the matrix ( el.matrix().globalTransform ), so why not just apply to to each point. I'm not sure what what help decomposing the matrix is giving you ?

So you could do this, iterate over the points, apply the matrix, and your polyline is flattened with the existing matrix...

var m = r1.transform().globalMatrix;
var pts = poly.attr('points');
var ptsarray = [];

for( var c = 0; c < pts.length ; c += 2 ) {     
   ptsarray.push( m.x( pts[c], pts[c+1] ), 
                  m.y( pts[c], pts[c+1] ) );

}
poly.attr('points', ptsarray ) 

jsfiddle

Transforming a coordinate using a Snap matrix can be found here