在路径末尾重置简单的 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>

我期望发生的是矩形在中心点上旋转成圆形。它的作用。

我希望它也能沿着这条路走下去。它的作用。

我希望它在路径上停止旋转。我认为确实如此。

我希望它停留在路径的尽头。它没有。

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

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

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

我想我需要一些东西来防止重置，但我不知道是什么。

提前致谢。

Answer 1

您需要添加fill="freeze"到 中，<animateMotion>以便最终冻结效果。请参阅：SVG - 第 19 章动画，时序属性：

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

看到它在这里工作：JSFiddle

有一个用SVG编写的W3C SVG 教程。一个非常好的社区维护的MDN SVG 教程和SVG 规范本身，它非常易读并且有很多例子。这是最好的参考，但您也应该使用 CodePen 或 JSFiddle 在不同浏览器中尝试所有内容。