svg - パスの最後で単純な svg オブジェクトをリセット

Question

これはおそらく非常に単純ですが、私はsvgを学び始めており、次のコードの動作に混乱しています:

<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>

私が期待しているのは、長方形が中心点で円を描くように回転することです。それは何をしますか。

私はそれが道を下ることも期待しています。それは何をしますか。

パスを下ると、回転が止まると思います。それはそうだと思います。

パスの終わりにとどまることを期待しています。それはしません。

スタート地点に戻り、回転を止めました。したがって、リセットが回転を停止したのか、実際の end ステートメントが回転を停止したのかはわかりません。

したがって、私の質問は 2 つあります。なぜリセットされるのか、どうすればそれを防ぐことができるのかということです。

また、優れた svg チュートリアルへのリンクをいただければ幸いです。私は多くのチュートリアルを見つけていますが、これは私の研究からすでに知っているはずの非常に単純な問題だと感じているので、品質を見つけていないと思います.

リセットを防ぐためにパスに何かが必要だと思いますが、何がわかりません。

前もって感謝します。