弧形进度条（Arc progress bar）Bug求助 - CSS/HTML/JS

你的问题出在strokeDashoffset的计算逻辑和初始配置上，另外刻度圈的硬编码值也容易导致不一致，以下是具体修复方案：

核心问题分析 #

1. strokeDashoffset的计算方向错误：你原来的写法是让进度条反向延伸，导致超出刻度圈范围；
2. 刻度圈的strokeDasharray硬编码数值，无法和进度条的动态计算周长保持一致；
3. 进度条初始状态未正确隐藏，导致默认显示部分超出区域。

修复后的代码 #

JS代码 #

let speedCircle = document.querySelector(".speed");
let meterCircle = document.querySelector(".meter");

let radius = speedCircle.r.baseVal.value;
// 计算75%圆周的长度
let circumference = 2 * radius * Math.PI * 0.75;

// 统一设置进度条和刻度圈的strokeDasharray，保证两者周长一致
speedCircle.style.strokeDasharray = circumference;
meterCircle.style.strokeDasharray = circumference;

// 初始状态让进度条完全隐藏
speedCircle.style.strokeDashoffset = circumference;

const progress = percent => {
    // 改为：总周长 - 进度占比对应的长度，实现正向填充
    speedCircle.style.strokeDashoffset = circumference - (percent / 100) * circumference;
}

progress(30);

CSS代码 #

.speed, .meter {
    fill: none;
    stroke-width: 10;
    transform-origin: center;
    transform: rotate(135deg);
}

.speed {
    stroke: green;
}

.meter {
    stroke: black;
    /* 移除硬编码值，由JS动态设置 */
}

HTML代码（无需修改） #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<svg width="250" height="250">
    <circle r="100" cx="125" cy="125" class="meter"></circle>
    <circle r="100" cx="125" cy="125" class="speed"></circle>
</svg>
<script src="script.js"></script>
</body>
</html>

修复说明 #

修改后进度条会从刻度圈的起始位置（旋转135度后的端点）开始，按照传入的百分比正向填充，完全贴合刻度圈的75%弧形范围，同时避免了硬编码数值带来的适配问题。

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