javascript - 增加 SVG 圆的大小

Question

我遇到了这个 fiddle :

http://jsfiddle.net/wz32sy7y/1/

我很难理解如何将圆扩大到更大的半径。

我尝试更改半径属性 r，但这会使动画不同步。

半径似乎是一个神奇的数字，但我无法确定它是如何计算的。

 <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="79.85699"
       cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
 </svg>

Answer 1

对于给定的半径 r，圆周长为 2πr。

由于四舍五入，此 fiddle 中的值略有偏差，但您可以通过为半径和周长设置新值来验证这种关系是否成立。

fiddle 中有 3 个地方用到了圆周。一旦进入 JavaScript:

var initialOffset = '440';

CSS 中的两次:

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

这是 fiddle 的一个版本，其中半径设置为 20，周长设置为 2 π × 20 = 125.664:

http://jsfiddle.net/6x3rbpfu/1/

这里我们设置半径为50，半径为314.159:

http://jsfiddle.net/6x3rbpfu/2/