search

michaelvillar / dynamics.js

Javascript library to create physics-based animations
http://dynamicsjs.com
7.57k stars 414 forks source link

SVG Rotation Transforms are "funny" #9

Open ipetepete opened 9 years ago

ipetepete commented 9 years ago

I'm sure this has nothing to do with dynamics.js (which is great btw). I've found that when rotating an svg, if the rotation is a multiple of 360 it won't rotate at all. In some cases, when the rotation is say 270 degrees, the rotation will actually happen in reverse. I'm thinking svgs have some funky polar coordinates , but I haven't found any documentation explaining the issue.

I've gotten around the issue by using css transforms, although I'm not sure this is ideal.

I've illustrated the behavior here: http://codepen.io/ipetepete/pen/doZqxK

I just wanted to report my findings for others. If anybody knows how to make svg rotation transforms work properly, I'd love to hear how.

michaelvillar commented 9 years ago

Yeah I'm not sure. It's the matrix decomposition that's messed up. I should look more into it, there could be some hack around it.