我想制作一个圆圈动画,
我目前有这个： http://jsfiddle.net/gf327jxu/1/
我目前有这个： 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,我需要顺时针,我怎么能实现这一点,这甚至可能吗？
解决方法
这是一个
fiddle example.
注意：我使用r = 57,因为周长是358.1,接近360度.对于不同的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>
