SVG动画圈 [英] SVG circle animation

问题描述

我想作一圆动画，结果
目前，我有这样的： http://jsfiddle.net/gf327jxu/1/

I am trying to make a circle animation,
I currently have this: 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，结果我需要它是顺时针方向，我怎么能做到这一点，是这甚至可能？

I want it animated like a circle progress, something like this: http://jsfiddle.net/andsens/mLA7X/ but in SVG,
And I need it to be clockwise, how can I achieve this, and is this even possible?

推荐答案

下面是一个小提琴例如。

请注意：我用 R = 57 ，因为周长 358.1 这是接近 360度。对于不同的研究值，你需要计算中风dasharray

Note: I used r = 57, since the perimeter is 358.1 which is close to 360 degrees. For different r values, you need to calculate the stroke-dasharray

非常感谢@Robert Longson，@Erik达尔斯特伦和@Phrogz了这么多年来的解决方案。
这小提琴只是他们调整之一。

Many thanks to @Robert Longson , @Erik Dahlström and @Phrogz for SO solutions over the years. This fiddle is just one of their tweaks.

这篇关于SVG动画圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！