[SOLVED] SVG animation backwards

SVG animation backwards

I dont know a lot about svg animations but i animated a half rotation from point a) to point b), it goes on for 4 seconds and i wanted that the rotation goes back from point b) to point a) after those 4 seconds, making the animation 8 seconds long.

here is the code i used:

<animateTransform accumulate="none" type="rotate" additive="replace" begin="0s;second.end" attributeName="transform" calcMode="linear" dur="4s" restart="indefinite" repeatCount="indefinite" from="90 400.64 160.05" to="30 400.64 160.05"  />

Solution

You need to use the keytimes attribute and change from and to to a list of values with values in your svg animation, like this:

<animateTransform 
  accumulate="none" 
  type="rotate" 
  additive="replace" 
  begin="0s;second.end" 
  attributeName="transform" 
  calcMode="linear" 
  dur="4s" 
  restart="indefinite" 
  repeatCount="indefinite" 
  keyTimes="0; 0.5; 1"
  values="90 400.64 160.05; 30 400.64 160.05; 90 400.64 160.05" 
/>

Here, the keyTimes are used to tell the animation when it should reach the different states defined in values, which now contains the start state, then the end state and again the start state, which were previously defined with from and to.

After the animation has completed, it will continue to play from the start, because restart and repeatCount are set to indefinite.