SVG圆动画

Question

我正在尝试制作圆形动画，
我目前有这个动画：http : //jsfiddle.net/gf327jxu/1/

<svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="40" />
</svg> 

CSS：

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

我希望它像一个圆形的进度一样动起来，像这样：http : //jsfiddle.net/andsens/mLA7X/， 但是在SVG中，
我需要顺时针旋转，如何实现此目标，甚至可能吗？

Answer 1

这是一个纯 svg 解决方案：codepen

<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" xml:space="preserve">
    <circle fill="none" stroke="#000" stroke-width="4" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
        <animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>
    </circle>
</svg>

Answer 2

这是一个小提琴的例子。

注意：我使用过r = 57，因为周长358.1接近360 degrees。对于不同的r值，您需要计算stroke-dasharray

感谢@Robert Longson，@ErikDahlströ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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text>
</svg>