在路径末尾重置简单的svg对象

这可能非常简单，但我正在开始学习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>

我所期望的是矩形在一个中心点上旋转成一个圆。确实如此

我希望它也会沿着这条路走下去。确实如此

我希望它一旦沿着这条路走下去就会停止旋转。我想是的

我希望它停留在这条路的尽头。但事实并非如此

它重置为起点并已停止旋转。所以我不确定重置是停止了旋转，还是实际的结束语句停止了旋转

所以我的问题有两个：为什么它会重置，以及如何防止重置

此外，如果有任何指向优秀svg教程的链接，我们将不胜感激。虽然我发现了很多教程，但我认为我没有发现质量，因为我觉得这是一个非常简单的问题，我应该从我的研究中知道

我想我需要一些东西在路径中，以防止重置，但我不知道什么

---

提前感谢。

您需要将

fill=“freeze”

添加到

：


有一个是用SVG编写的。维护了一个非常好的社区，并且该社区本身非常可读，并且有许多示例。这是最好的参考资料，但您也应该使用CodePen或JSFIDLE在不同的浏览器中尝试所有内容。
谢谢！我觉得很简单。明天我将查看这些资源。
<animateMotion id="onemove" dur="3s" fill="freeze">
    <mpath xlink:href="#thepath"/>
</animateMotion>