时间戳

首页 > 解决方案 > 如何重置 SVG 动画

html - 如何重置 SVG 动画

问题描述

最近开始进入 SVG 动画，所以我想要做的是让这个圆圈回到矩形的中心并返回，它第一次这样做然后支持动画不断重复，这里是代码：

    <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>

谢谢！

标签： htmlsvg

解决方案

您可以使用值列表：

<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>

推荐阅读