Question

最近开始使用SVG动画，所以我想做的是使该圆圈移到rect的中心并返回，这是第一次执行，然后背景动画不断重复，这是代码：

    <svg style="border: 1px solid black; background-color: yellow;" width="750" height="500">
    <circle id="kruzic" cy="250" cx="0" r="40" fill="blue">
        <animate attributeName="cx" attributeType="XML" from="-50" to="335" dur="2s" repeatCount="indefinite" />
        <animate attributeName="cx" attributeType="XML" from="335" to="-50" begin="2s" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

谢谢！

Answer 1

您可以使用值列表：

<svg style="border: 1px solid black; background-color: yellow;" width="750" height="500">
    <circle id="kruzic" cy="250" cx="0" r="40" fill="blue">
        <animate attributeName="cx" attributeType="XML"  dur="4s" values="-50; 355; -50;" repeatCount="indefinite" />

    </circle>
</svg>

如何进行SVG动画重置

1 个答案: