SVG圈动画

我试图做一个圆圈的动画，
我现在有这样的：http://jsfiddle.net/gf327jxu/1/SVG圈动画

<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中，
而我需要它是顺时针的，我怎么能做到这一点，甚至有可能？

来源

2014-10-03 robert

相关的问题：http://stackoverflow.com/a/24486333/1811992 [CSS3微调的 – 2014-10-03 11:30:19

可能重复，preloader]（http://stackoverflow.com/questions/24484727/css3-spinner-preloader） – 2014-10-03 11:43:55

对于纯粹的svg解决方案：你可以通过动画'stroke-dashoffset'，http：// xn-- dahlstrm-t4a.net/svg/path/piecharts.html就是一个例子。 – 2014-10-03 15:43:53

这是fiddle example。

注：我使用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>

来源

2014-10-03 17:17:52

更新[小提琴]（http://jsfiddle.net/alkhoo/JwkYm/16/）随机角度和颜色的变化，使其“视觉化”。 – 2014-10-05 17:47:32

<!DOCTYPE html> 
<html> 
    <head> 
     <title>svg circle animation</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 
      #XMLID_4_{ 
       stroke-dasharray: 1000; 
       stroke-dashoffset: 2000; 
       fill: #FFFFFF; 
       stroke: #000000; 
      } 
      svg:hover #XMLID_4_{ 
       -webkit-animation: draw 3s forwards; 
       animation: draw 3s; 
      } 
      @keyframes draw{ 
       from{ 
        stroke-dashoffset: 1000; 
        fill:#efefef; 
        stroke:#ff5535; 
       } 
       to{ 
        stroke-dashoffset: 0; 
       } 
      } 
      @-webkit-keyframes draw{ 
       from{ 
        stroke:#ff5535; 
        stroke-dashoffset: 1000; 
       } 
       to{ 
        stroke-dashoffset: 0; 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> 
     <g> 
     <circle id="XMLID_4_" stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/> 
     </g> 
     </svg> 
    </body> 
</html>

与您在CSS3寻找效果

来源

2017-03-31 07:29:27

回答

相关问题