增加SVG圈的大小

Question

我遇到了這個小提琴：

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 。

由於四舍五入，此小提琴中的值略有偏差，但您可以通過設置半徑和周長的新值來驗證關系是否成立。

小提琴中有三個位置使用圓周。 進入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;
}

這是小提琴的一個版本，其中半徑設置為20，周長為2π×20 = 125.664：

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

這里我們將半徑設置為50，將半徑設置為314.159：

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

Answer 2

以下小提琴將允許您使用標記和“r”屬性任意設置寬度，而不是每次都更改CSS。 嘗試將SVG中“r”屬性中的值更改為您喜歡的任何值。

https://jsfiddle.net/ma46yjvx/1/

SVG中的虛線偏移動畫通過使用SVG的虛線輪廓特征制作一個非常長的短划線，然后使用像素偏移沿着該路徑爬行邊界來工作。 它使它看起來像是繪圖。

因此，當我們縮放半徑時，我們需要縮放每個動畫步驟偏移破折號的量。 因此，使用作者使用的相同幻數（dunno來自哪里，但它有效！），我們有：

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r"); //Get the radius, so we can know the multiplier
var interval = setInterval(function() {
    $('.circle_animation').css(
        'stroke-dashoffset',
        initialOffset-(i*(initialOffset/time)*(r/69.85699)) //Scale it!
    );
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);