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>

---

谢谢

您可以使用值列表：