Как сделать сброс анимации SVG

Question

недавно начал изучать 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>

Спасибо!

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>