Animation 具有半径更改的svg圆形动画

我有一个svg循环上10秒的循环动画。 当我尝试更改两个圆圈上的

r=“30”

时，动画就会生效，并且只持续5秒。我认为除了

r

值外，我还必须分别更改

cx

和

cy

值，以获得合适的尺寸，并使动画持续10秒。你能指出哪里出了问题吗

以下是链接：

以下是片段：

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

---

根据你的问题，我推测你一定在减小圆的半径。我说得对吗

如果减小圆半径，圆的周长也会减小。

笔划dashoffset

属性中的“251”值对应于周长

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

动画的工作方式是移动直线划线图案的位置，使其看起来像是在缓慢地绘制直线

如果将半径减半，周长也将减半。如果不同时更正

笔划dashoffset

，动画将在一半时间内完成。这是因为动画在5秒后已经达到新的周长126

要解决此问题，只需将

笔划dashoffset

值更新为126

如果要使用20以外的半径，还需要计算出该半径的正确周长/

stroke dashoffset

.progress-circle.definite.progress{
笔画：橙色；
笔画宽度：2；
笔划偏移：0；
笔划阵列：126；
动画：进步动画10秒轻松；
}
.progress-circle.definite.bg{
笔画：白色；
笔画宽度：2；
}
@关键帧进度动画{
0%{stroke dashoffset:126；}
100%{stroke dashoffset:0；}
}
//不确定

圆的周长取决于半径，因此需要覆盖的笔划长度随半径而变化，因此笔划数组值也会随之变化。感谢您的精彩解释和解决方案。上帝保佑！