箭头在圆形动画的外半径上旋转

Question

The idea is to have the arrow spin around the circle, on the outer radius. So the arrow has to stick to the outer radius and then follow the outer radius.

It has to start spinning when I click a button 'start' and has to slow down and come to a stop after clicking a button 'stop'

Current HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="800px">

  <path class="shape" fill="blue" d="
            M 100, 200 
            m 0 -100 
            a 100 100 0 1 0 1 0
            z
            m -1 25    
            a 75 75 0 1 1 -1 0     
            Z" />
</svg>

The circle + arrow
https://codepen.io/tom-truyen/pen/KORgYX

Answer 1

Insert the following below your donut svg:

    <script>
        var animate = false;
        var angle = 0;
        function tick() 
        { 
            document.querySelector(".arrow").setAttribute("style", "transform:translate(75px,175px) rotate("+angle+"deg) translate(0px,-112px);");
            angle += 1;
            if (animate) { window.requestAnimationFrame(tick); }
        }
    </script>

    <button onClick="window.animate=true;tick();">start</button>
    <button onClick="window.animate=false;">stop</button>

and change the arrow css to:

    .arrow {
        height: 50px;
        width: 50px;
        position: absolute;
        transform:translate(75px,175px) translate(0px,-112px);
    }

That should do what you asked for.