javascript - 需要增加圆的高度和宽度

我需要将圆圈的高度和宽度增加一倍。但这不起作用。请建议我在代码中放置错误的位置。我不知道r的值。请帮助我更新r的值。

这是我的示例代码。

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
  $('.circle_animation').css(
    'stroke-dashoffset',
    initialOffset - (i * (initialOffset / time) * (r / 69.85699))
  );
  $('h2').text(i);
  if (i == time) {
    clearInterval(interval);
  }
  i++;
}, 1000);

    .item {
      position: relative;
      float: left;
    }

    .item h2 {
      text-align: center;
      position: absolute;
      line-height: 125px;
      width: 100%;
    }

    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
  <h2>0</h2>
  <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
         <g>
          <title>Layer 1</title>
          <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
         </g>
        </svg>
</div>

最佳答案

如您所料，您必须更改r的值才能更改半径。

如果我们看一下javascript代码：

    var r = $(".circle_animation").attr("r");

这意味着r是类名称为r的元素的html属性circle_animation的值。

如果我们再看一下html标记：

    <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>

我们看到在类名circle_animation的圆上r设置为69.85699

之后，您必须记住，由于绘制了更大的圆圈，因此还必须将svg的大小以及stroke-dasharray和stroke-dashoffset都加倍（这些值应为2 * 2 * PI * r此动画）。

这是您要求的半径加倍的示例：

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r");
var interval = setInterval(function() {
    $('.circle_animation').css(
        'stroke-dashoffset',
        initialOffset-(i*(initialOffset/time)*(r/139.71398))
    );
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
    margin-top: 60px;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="139.71398" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>

关于javascript - 需要增加圆的高度和宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55060212/