simple svg object reset at end of path

Question

This is probably really simple but I am starting to learn svg and am confused by the behavior of the following code:

<svg>
<defs>
    <path id="thepath" fill="none" stroke="#000000" d="M25,0 L200,200" />
</defs>
<rect x="25" y="0" width="50" height="100" fill="slategrey">
      <animateTransform id="one"
                        attributeType="xml"
                        attributeName="transform"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="1s"
                        repeatCount="indefinite" 
                        end ="onemove.end"/>

    <animateMotion id="onemove" dur="3s">
        <mpath xlink:href="#thepath"/>
    </animateMotion>
</rect>

What I am expecting to happen is the rectangle rotate in a circle on a center point. Which it does.

I expect it to also travel down the path. Which it does.

I expect it to stop rotating once it is down the path. Which I think it does.

I expect it to stay at the end of the path. Which it does not.

It resets to the start point and has stopped rotation. So I am not sure if the reset stopped the rotation or the actual end statement stopped rotation.

So my question is two fold: why does it reset and how do I prevent that.

Also, any links to good svg tutorials would be appreciated. While I am finding a lot tutorials, I think I am not finding quality because I have a feeling this is a very simple issue I should already know from my research.

I think I need something in the path to prevent the reset but I have no idea what.

Thanks in advance.

Answer 1

You need to add fill="freeze" to the <animateMotion> so it will freeze the effect at the end. See: SVG - Chapter 19 Animation, Timing Attributes:

<animateMotion id="onemove" dur="3s" fill="freeze">
    <mpath xlink:href="#thepath"/>
</animateMotion>

See it working here: JSFiddle

There is a W3C SVG Tutorial written in SVG. A very good community-maintained SVG Tutorial at MDN and the SVG Specification itself which is very readable and has many examples. It's the best reference, but you should also try out everything in different browsers using CodePen or JSFiddle.