Question

我在svg圈上有一个圆形动画，持续10秒。当我尝试更改两个圆圈上的r="30"时，动画生效并持续5秒钟。我认为除了r值之外，我还必须分别更改cx和cy值以获得适当的维度，并使动画持续10秒。你能指出出了什么问题吗？

以下是链接：https://codepen.io/anon/pen/jxREMd

以下是片段：

<svg class="progress-circle definite" width="100" height="100">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="transparent"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
  </defs>
  <g transform="rotate(-90,50,50)">
    <circle class="bg" r="40" cx="50" cy="50" fill="url(#linear)"></circle>
    <circle class="progress" r="40" cx="50" cy="50" fill="none"></circle>
  </g>
</svg>

Answer 1

我猜测你必须缩小圆半径。我是对的吗？

如果减小圆半径，圆的圆周也会减小。＆＃34; 251＆＃34; stroke-dashoffset属性中的值对应于周长。

circumference = 2*PI*r = 2*PI*40 ~= 251

动画通过移动线条虚线图案的位置来工作，这样它就会慢慢画出线条。

如果将半径减半，圆周也会减半。如果您还没有更正stroke-dashoffset，则动画将在一半的时间内完成。这是因为动画在5秒后已经达到126的新周长。

要解决此问题，只需将stroke-dashoffset值更新为126。

如果你想使用20以外的半径，你也需要计算出正确的圆周/ stroke-dashoffset。

＆＃13;

.progress-circle.definite .progress {
  stroke: orange;
  stroke-width: 2;
  stroke-dashoffset: 0;
  stroke-dasharray: 126;
  animation: progress-anim 10s ease;
}

.progress-circle.definite .bg {
  stroke: white;
  stroke-width: 2;
}

@keyframes progress-anim {
  0% { stroke-dashoffset: 126; }
  100% { stroke-dashoffset: 0; }
}


// indefinite

＆＃13;

<svg class="progress-circle definite" width="100" height="100">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="transparent"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
  </defs>
  <g transform="rotate(-90,50,50)">
    <circle class="bg" r="20" cx="50" cy="50" fill="url(#linear)"></circle>
    <circle class="progress" r="20" cx="50" cy="50" fill="none"></circle>
  </g>
</svg>

＆＃13;

svg半径变化的圆形动画

1 个答案: