Transform Origin and Rotation

[Tyler Shuster]

I'm applying Snap transformations to group elements within an SVG. Currently my transformations look like this: 

element.attr({ transform: "translate(elementX,elementY)" });

 I've tried adding things like 

+" "+ "transform-origin": X Y Z

to no avail. Really I'd just like to be able to rotate something on a pivot and I've tried things like this: http://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg as well, though I don't know how to use that matrix logic in Snap. 

I'm not familiar enough with everything, but I feel like http://snapsvg.io/docs/#Matrix.rotate is what I'm looking for, though I don't know how to apply that to a group element. 

[Cole Lawrence]

Had this problem earlier ;)

Translation code looks like:

element.attr({ transform: "t"+[dX,dY] });

Rotation code looks like:

element.attr({ transform: "r"+[angle,pivotX,pivotY] });

[Cole Lawrence]

Here's how they did it in the Coffee Demo:
https://github.com/adobe-webplatform/Snap.svg/blob/master/demos/illustrated-infographic-coffee/index.html#L143

[Tyler Shuster]

Awesome. Thank you - totally fixed my problem. For those looking for future reference:

transform: "s"+[scaleX,scaleY]+"r"+[angle,pivotX,pivotY]+"t"+[translateX,translateY]

can be concatenated as such. Took a guess at the s; not sure if there are others

[Cole Lawrence]

 Took a guess at the s; not sure if there are others

Lol; hopefully there will be more demos to reference in the future :)
Didn't know about the concatenation, that's cool.

[Tyler Shuster]

Found a great reference SX question: http://stackoverflow.com/questions/20302801/transform-properties-in-snap-svg-no-making-sense/20305995#20305995. I was worried that using "t"+etc wouldn't work because it translated after the rotation was applied. Turns out capitalization matters.

[pascal]

Is it possible to get the rotation angle of a shape?

[Ian]

Not entirely sure on this, but I think it will depend a bit in terms of the rotation of what (as there may be rotations of an element inside something rotated if that makes sense).

I suspect in most simple cases something like this would work.... 

myrectobject.transform().localMatrix.split().rotate;

Basically transform() will return an object showing the transform matrix object (combined rotations/scales/translates). See http://snapsvg.io/docs/#Element.transform for localMatrix, and split() splits the matrix into its separate rotations/translates/scales (probably worth doing a quick read up on svg matrices if not come across them before).

Ian

[pascal]

Thank you Ian, this is exactly what I was looking for. It works for me!