3

这可能真的很简单，但我开始学习 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 教程的链接将不胜感激。虽然我找到了很多教程，但我认为我没有找到质量，因为我觉得这是一个非常简单的问题，我应该从我的研究中知道。

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

提前致谢。

4

1 回答 1

6

您需要添加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 在不同的浏览器中尝试所有内容。

于 2014-03-07T04:21:57.350 回答