AnimateTransform not working as expected

Question

My intention was to move the object to a set point (300), stop there for a bit, and then move it again. I tried doing it with animateTransform like this:

<animateTransform attributeName="transform" additive="sum" type="translate" dur="12s" start="1s"  fill="freeze"
from="650px" to="300px" repeatCount="1" /> 

<animateTransform attributeName="transform" type="translate" dur="2s"  additive="sum" start="20s"  fill="freeze"
from="300px" to="200px" repeatCount="1" />

but now the object only moves a 100px after 20s (the first transform is ignored?). I tired using animate instead, but that didnt work as intended either. Any advice on where i went wrong and what i should do to get the animation effect wanted?

Answer 1

1. The timing attribute is begin, not start.

2. Leave off the px units. While they are legal according to SVG 2, they were not in SVG 1.1, and may not be implemented in some browsers yet.

3. additive="sum" means that the transformation is added on top of the transformation value resulting from previous animations. At the begin time of the animation the object will jump by the amount of the from value and move from there. This is probably not what you wanted to achieve. Either use additive="replace" or start all animations with from="0" and set to to a relative value.