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>

我期望发生的事情是矩形在中心点上旋转一圈。它的作用。

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

我希望它在沿着路径前进时停止旋转。我认为确实如此。

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

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

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

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

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

提前致谢。

Answer 1

您需要添加 fill="freeze"到 <animateMotion>所以它会在最后卡住效果。请参阅:SVG - Chapter 19 Animation, Timing Attributes :

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

在这里查看它的工作情况:JSFiddle

有一个W3C SVG Tutorial用 SVG 编写。一个很好的社区维护SVG Tutorial at MDN和 SVG Specification本身非常可读并且有很多例子。这是最好的引用，但您也应该使用 CodePen 或 JSFiddle 在不同的浏览器中尝试一切。