如何计算SVG圆形中的虚线进度路径以展示用户等级进度

基础参数预计算 #

你现有SVG的圆形半径r=110，先计算完整圆周长：
周长 = 2 * π * r ≈ 2 * 3.1416 * 110 ≈ 691.15
你配置的strokeDasharray="220 10"刚好匹配3段进度的需求：每段有效进度长度为220，两段进度之间的间隔为10，3段总长度为3*220 + 2*10 = 680，和周长的差值通过strokeDashoffset="50"对齐起始位置，和你预设的规则完全匹配。

进度覆盖实现逻辑 #

你不需要额外编写自定义<path>，直接在现有底层圆形上方叠加一个坐标、半径完全相同的高亮圆形，通过调整描边参数即可实现进度覆盖，比自定义路径方案更简单易维护：

• 定义2个变量：当前用户等级level（取值1/2/3），当前经验/升至下一级总经验的比值rate（取值范围0~1，满级3级时固定为1）
• 计算总覆盖长度：总覆盖长度 = (level - 1) * (220 + 10) + rate * 220，其中220是单段进度长度，10是段间间隔长度

完整SVG代码示例 #

<svg
   width="240"
   height="240"
   viewBox="0 0 240 240"
>
    <!-- 底层浅色系虚线环：你的原有代码 -->
    <circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" 
     strokeWidth="2px" strokeDasharray="220 10" strokeDashoffset="50" />
    <!-- 上层高亮进度环 -->
    <circle cx="120" cy="120" r="110" fill="none" stroke="#222" 
     strokeWidth="4px" <!-- 比底层粗2px，刚好完全覆盖底层虚线 -->
     strokeDasharray="{总覆盖长度} 1000" <!-- 第二个值设为远大于周长的数值，保证只显示需要的进度段 -->
     strokeDashoffset="50" <!-- 和底层保持一致，保证进度位置对齐 -->
     strokeLinecap="round" <!-- 可选配置，让进度端点更圆润 -->
    />
</svg>

场景验证（对应你提到的2级、升级进度近一半的场景） #

取level=2，rate≈0.5，代入公式得总覆盖长度：
总覆盖长度 = (2-1)*230 + 0.5*220 = 230 + 110 = 340
将高亮圆形的strokeDasharray设为340 1000即可实现对应效果。

如果你确实需要用<path>实现自定义圆弧覆盖，可通过SVG弧形命令A生成对应角度的路径：先将总覆盖长度换算为角度总角度 = 总覆盖长度 / 周长 * 360，再按弧形路径语法拼接参数即可，该方案复杂度更高，无特殊需求优先推荐叠加圆形的方案。

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