Define a circle / arc animation in SVG

Question

Does anyone know how to define an animated arc / circle in SVG, such that the arc starts at 0 degrees and ends at 360 degrees?

Answer 1

One way is to use a circle, and animate the stroke-dashoffset (you need 'stroke-dasharray' too). An example of such an animation (not with a circle, but the same principle applies) can be seen here.

The other option is to use a path animation, and arc path segments, for animating/morphing between paths see this example.

Answer 2

you can paint it "by hand" using path's lineto and calculate the position of the arc:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;"
   onload="drawCircle();"> 
  <script> 
    function drawCircle() {
        var i = 0;
        var circle = document.getElementById("arc");
        var angle = 0;
        var radius = 100;     
        window.timer = window.setInterval(
        function() {
            angle -=5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = 200 + Math.cos(radians) * radius;
            var y = 200 + Math.sin(radians) * radius;
            var e = circle.getAttribute("d");
            if(i==0) {
                var d = e+ " M "+x + " " + y;
            }
            else {
                var d = e+ " L "+x + " " + y;
            }  
            circle.setAttribute("d", d);
            i++;
        } 
      ,10)
    }
    </script> 

    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>

Only as example - this circle will be drawn forever....

Answer 3

Thanks for the answers - here is a little more information regarding why I want to animate a circle in SVG:

We have a server-client application. I plan to generate SVG images to represent charts (pie charts / bar charts) on the server and send the SVG to the clients. We have Java and .NET clients. I will write client-side code to parse and render the SVG images received from the server. I plan to use only a subset of the SVG format - not more than what we need to represent our charts, but animation is a requirement.

Long-term it would be nice to have an ajax client - that will run on browsers without java or .NET runtime. That is why I have chosen the SVG format.

For a short term solution I now think I will add my own element to the SVG, defining an arc using start and sweep angles. Then I can easily define the animation I require by animating the sweep angle, and makes my implementation simple.

Long term - if we really get around to imlpementing an AJAX/HTML client - I will have to re-implement and stick to the SVG standard.