<svg id="svg" viewBox="0 0 720 100" onclick="startSVGAnimation();">
	<circle id="circle" cx="50" cy="50" r="50" fill="#cc3333"/>
</svg>
<script>
	(function(){

        // グローバル関数
        window.startSVGAnimation = startAnimate;

        var svg = document.getElementById("svg");
        var circle = document.getElementById("circle");
        var intervalId = null;
        var currentLeft = 0;

        // アニメーション開始
        function startAnimate() {
            currentLeft = 0;
            circle.setAttribute("cx", 50);
            if (intervalId){
                clearInterval(intervalId);
            }
            intervalId = setInterval(onAnimate, 1000 / 60);
        };

        // アニメーション中
        function onAnimate() {
            currentLeft += 5;
            if (720 < currentLeft) {
                clearInterval(intervalId);
                completeAnimate();
            } else {
                circle.setAttribute("cx", 50 + currentLeft);
            }
        };

        // アニメーション終了
        function completeAnimate() {
            currentLeft = 0;
            circle.setAttribute("cx", 50);
        };

    })();
</script>