【问题标题】：Need to show circlular progress bar if it's more than 100% - (A circle upon a circle)如果超过 100% 则需要显示圆形进度条 - （一圈一圈）
【发布时间】：2022-07-25 22:27:17
【问题描述】：
说明
这是我的用例：当进度条超过 100% 时显示圆形进度条click here to see a attachment
根据 pathLength 百分比计算，我尝试在另一个圆圈上显示一个圆圈，但 animationMotion 并没有在 pathLength 限制处停止，它完成到 360 度
如果有人知道如何在特定点限制动画，我将不胜感激
看看这个 codepen click here 以获得更好的理解。
我也很高兴听到任何其他方法...
【问题讨论】：
标签：
javascript
reactjs
animation
svg
svg-animate
【解决方案1】：
我认为圆上的额外变换可能会影响您的弧坐标计算。如果您将 case_progress_path 的最后一条弧线调整为：
<path id="case_progress__path" style="fill:none;stroke:#ebedf8;stroke-width:1" pathLength="1" stroke-dasharray="0.9, 1" d="M 124,70 A 54,54 0 0 1 70,124 54,54 0 0 1 16,70 54,54 0 0 1 70,16 54,54 0 0 1 70,124" />
图像过度旋转很好。