Unable to animate a rotation with centre points defined about svg.js HOT 5 CLOSED

Ok, I think I know what the problem is. Could you try this:

cx = +joint.attr('cx')
cy = +joint.attr('cy')
poly.rotate(0, cx, cy).animate(2000, '<').rotate(-45, cx, cy)

If that does not throw the error I know where to look.

from svg.js.

That fixes the javascript error!
However I need the animation to stop on mouseout and reverse.
Setting the initial values causes the animation to 'snap' to the initial position
but with my hack it transitions from where it left off.

My code:

.on 'mouseover', ->
    handle1.rotate(0, cx, cy).animate(250, '=').rotate(-40, cx, cy)
    handle2.rotate(0, cx, cy).animate(250, '=').rotate(40, cx, cy)
.on 'mouseout', ->
    handle1.rotate(-40, cx, cy).animate(250, '=').rotate(0, cx, cy)
    handle2.rotate(40, cx, cy).animate(250, '=').rotate(0, cx, cy)

from svg.js.

Great. The cause of the error was that the cx and cy values in transformations of newly created elements are undefined. I will fix this in the next release. In the meantime it will suffice to just define those values manually right after creation of the element:

var cx = +joint.attr('cx')
var cy = +joint.attr('cy')
var poly = draw.polygon(...).transform({ cx: cx, cy: cy })

Once they are defined you can safely go back to your old code:

poly.animate(2000, '<').rotate(-45, cx, cy)

Without the extra rotate before calling animate that is.

from svg.js.

Awesome! Thanks for the great library!

from svg.js.

Unrelated:
I posted a question on stackoverflow about SVG.js and the ability to animate paths.
http://stackoverflow.com/questions/16460830/is-path-animation-possible-with-svg-js

Perhaps something could be added to the documentation about this.

from svg.js.