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

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

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

1 个答案: