偏移SVG AnimateMotion的动画起点

Question

我的SVG中有一个path，我想使用animateMotion为其中的2个rect元素设置动画。但是，我希望这两个矩形沿着路径从不同的点开始。

通过使用begin来偏移开始时间，我已经接近了，但这意味着一个矩形会被卡住，直到它的时间开始——这是不理想的。有没有类似于begin的东西，比如startOffset的文本可以工作？

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="lightgrey" id="motionPath"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
>
<mpath xlink:href="#motionPath"/>
</animateMotion>
</circle>

<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
begin="2s"
>
<mpath xlink:href="#motionPath"/>
</animateMotion>
</circle>
</svg>

Answer 1

对于无限重复运动的情况，最简单的解决方案是将begin时间设置为负值。在文档开始时，运动被计算为已经开始，并且动画元素在偏移处开始。

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="lightgrey" id="motionPath"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
>
<mpath xlink:href="#motionPath"/>
</animateMotion>
</circle>

<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
begin="-2s"
>
<mpath xlink:href="#motionPath"/>
</animateMotion>
</circle>
</svg>

注意：对于非重复运动，也可以使用符号keyPoints="0.2;1"。这样，在简单的持续时间内，动画元素沿着路径从20%移动到100%，但在开始时从不显示