Question

我遇到了这个小提琴：

我很难理解如何扩展圆圈以获得更大的半径。

我尝试更改半径属性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

以下小提琴将允许您使用标签和＆＃34; r＆＃34;任意设置宽度。属性，而不是每次都改变你的CSS。尝试更改＆＃34; r＆＃34;中的值。将SVG中的属性转换为您喜欢的任何内容。

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);

增加SVG圈的大小

2 个答案: