Круговая анимация SVG

Я пытаюсь сделать анимацию круга, В настоящее время у меня есть это: http://jsfiddle.net/gf327jxu/1/

<svg>
 
</svg>

CSS:

.circle{
stroke:green;
stroke-width:10;
fill:none;
}

Я хочу, чтобы он был анимирован, как круговой прогресс, примерно так: http://jsfiddle.net/andsens/mLA7X/, но в SVG, И мне нужно, чтобы это было по часовой стрелке, как я могу это достичь, и возможно ли это?

2 ответа

Вот пример скрипки.

Примечание: Я использовал r = 57, так как периметр 358.1 который близок к 360 degrees. Для разных значений r вам нужно вычислить stroke-dasharray

Большое спасибо @Robert Longson, @Erik Dahlström и @Phrogz за SO решения на протяжении многих лет. Эта скрипка - лишь одна из их хитростей.

(function() {
 // math trick 2*pi*57 = 358, must be less than 360 degree 
 var circle = document.getElementById('green-halo');
 var myTimer = document.getElementById('myTimer');
 var interval = 30;
 var angle = 0;
 var angle_increment = 6;

 window.timer = window.setInterval(function() {
 circle.setAttribute("stroke-dasharray", angle + ", 20000");
 myTimer.innerHTML = parseInt(angle / 360 * 100) + '%';

 if (angle >= 360) {
 window.clearInterval(window.timer);
 }
 angle += angle_increment;
 }.bind(this), interval);
})()
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none">
 
 <text id="myTimer" text-anchor="middle" x="100" y="110">0%</text>
</svg>


<title>svg circle animation</title>
 
 
 
 
 
 <svg xmlns="http://www.w3.org/2000/svg">
 <g>
 
 </g>
 </svg>

licensed under cc by-sa 3.0 with attribution.