Question

I’m doing some work that requires the rotation of an element within some SVG from javascript. To do this I’ve been testing how to setup the SVG item, define the animation and then run the animation based on an arbitrary event, outside of SVG itself (from js). Before the animation is run I set the degrees for the rotation and how fast I wish the rotation to occur.

This all works fine.

My problem is that when the animation is complete, the svg reverts back to it’s original state. This means that if I rotate the SVG to 90 degrees, when the animation completes the SVG is immediately reverted back to 0 degrees.

I’ve looked at the svg doco at w3.org, specifically the additive and accumulate options, but they don’t appear to work for me.

I’m sure it’s something trivial, but I cannot see what the cause of the problem is.

JSfiddle example of the problem

Thanks to Robert I have the solution. I’ve added the solution below.

JSfiddle example of the solution

Answer 1

Add fill=”freeze” to the animateTransform element.