如何实现SVG圆形stroke-dasharray与stroke-offset描边动画 饼图效果异常

代码未正常生效的原因共3点：

• 原生CSS不支持在选择器内部嵌套@keyframes规则，你把动画定义写在了#circle选择器块内，浏览器无法识别动画逻辑，直接导致动画不触发。
• 圆形描边周长计算错误：半径为18的圆，实际周长为2πr ≈ 113.1，你代码里预设的100和实际周长不匹配，会出现描边长度不准的问题；且动画结束状态错误设置stroke-dashoffset: 50，会让描边反向偏移，无法停在长度为50的预期位置。
• SVG根节点未设置宽高，容易出现描边被画布边缘裁切的显示问题。

CSS代码 #

#circle{
  fill: none;
  stroke: black;
  stroke-width: 5px;
  animation: progress 5s linear forwards;
}
@keyframes progress {
  from {
    stroke-dasharray: 0 113.1;
  }
  to {
    stroke-dasharray: 50 113.1;
  }
}

HTML代码 #

<svg width="48" height="48">
  <circle cx='24' cy='24' r='18' id="circle"/>
</svg>

• 描边动画核心逻辑是通过stroke-dasharray控制「实线段长度+间隙长度」：初始状态实线段长度为0，间隙长度等于圆周长，视觉上看不到描边；动画过程中实线段长度平滑增长到50，就实现了从0开始的描边生长效果。
• 全程不需要修改stroke-dashoffset属性，保持默认值0即可，避免出现描边位置偏移。
• 如果需要精准适配不同半径的圆，可以通过circle元素.getTotalLength()方法获取元素真实周长，替换代码里的113.1数值即可；如果需要调整最终描边长度，只需要修改动画终态stroke-dasharray的第一个数值，最大值设为圆周长时即可显示完整整圆描边。

内容的提问来源于stack exchange，提问作者surya kumara