How to access matrix in transform attribute svg/Raphael?

[pbohny]

this is my element I want to access

<rect x="0" y="0" width="896" height="504" r="0" rx="0" ry="0" fill="#55edff" stroke="#eeffdd" 
opacity="1.0" stroke-width="25" stroke-opacity="1.0" fill-opacity="1.0" 
vector-effect="non-scaling-stroke" transform="matrix(0.1,0,0,0.2,403.2,201.6)">
</rect>

acccessing e.g. the opacity works great:

TweenMax.to(rectangle, 5, {raphael:{'opacity':0.2}, ease:Elastic.easeOut});

 
but how would I access the values in the transform attribute?

transform="matrix(0.1,0,0,0.2,403.2,201.6)"

[pbohny]

I think I figured something out, please could somebody confirm, that my assumptions are correct? 

You don't manipulate the matrix directly, its just a representation of calcualted values. You use standard commands like e.g.

 

 {raphael:{'scaleX':0.5}

This controls scaling, with 'rotation'  I control rotation and with x and y the translate.x and y values.

 

But why are the pixel values a 10-fold of the real value, meaning it's

 

{raphael:{'x':3000}

 

 to move 300px?

[GreenSock]

Yes, the matrix is just a combination of various individual values like scaleX, scaleY, x, y, rotation, etc. You can just tween those. As far as why it's ten-fold, it shouldn't be - I wonder if you've got a parent container that's at 1/10th scale, thus for every pixel you move its child, it only looks like 1/10th of a pixel. See what I mean? Feel free to post a very simple example/codepen/jsfiddle that clearly demonstrates the issue if you're still having trouble.