我想制作一个圆圈动画,
我目前有这个： 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>
