如何将全环形进度条改造为3/4环形嵌套进度条？

嘿，我来帮你搞定这个3/4环形进度条的改造！你的核心需求是把全圆环改成只显示3/4的弧形进度条，其实关键是调整SVG的stroke-dasharray、stroke-dashoffset属性，再配合圆角端点来贴近目标效果。我一步步给你修改代码：

核心思路 #

SVG的<circle>默认从右侧（0度）绘制全圆，要实现3/4环形，我们需要：

1. 把圆环的可见总长度限制为周长的75%
2. 调整绘制的起始位置，让3/4圆弧从顶部开始（更符合常见的UI设计）
3. 给进度条加上圆角端点，提升视觉效果

修改后的完整代码 #

HTML（结构无需大改，保留原有容器）

<div class="progress-container">
  <svg class="progress-bar" width="100%" height="100%" viewBox="0 0 42 42">
    <circle class="progress-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
    <circle class="progress-value" cx="21" cy="21" r="15.91549430918954" fill="transparent"/>
  </svg>
  <div class="progress-text">0%</div>
</div>

CSS（重点修改stroke相关属性）

.progress-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  /* 旋转SVG，让3/4圆的起始点在顶部（可选，根据需求调整） */
  transform: rotate(-90deg);
}

.progress-ring {
  stroke: #ddd;
  stroke-width: 2;
  fill: transparent;
  /* 总周长按100计算，75表示显示3/4圆环，100是总长度 */
  stroke-dasharray: 75 100;
  /* 圆角端点，贴近目标样式 */
  stroke-linecap: round;
}

.progress-value {
  stroke: #3498db;
  stroke-width: 2;
  fill: transparent;
  /* 初始进度为0，总可见长度是75 */
  stroke-dasharray: 0 75;
  transition: stroke-dasharray 0.3s;
  stroke-linecap: round;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #3498db;
}

JavaScript（调整进度计算逻辑）

const progressContainer = document.querySelector('.progress-container');
const progressValue = progressContainer.querySelector('.progress-value');
const progressText = progressContainer.querySelector('.progress-text');

const updateProgress = (value) => {
  // 3/4圆的总可见长度是75，根据百分比计算实际进度长度
  const progressLength = (value / 100) * 75;
  // 更新stroke-dasharray，进度长度 + 总可见长度
  progressValue.style.strokeDasharray = `${progressLength} 75`;
  // 更新文字显示
  progressText.textContent = `${value}%`;
}

updateProgress(50); // 设置为50%进度，测试效果

关键修改点说明 #

1. CSS中的transform: rotate(-90deg)：把SVG旋转-90度，让圆弧的起始点从默认的右侧转到顶部，这样3/4圆会从顶部顺时针延伸到左侧，更符合常见的环形进度条设计。
2. stroke-dasharray调整：
   • 背景圆环（progress-ring）用75 100，表示只显示75%的圆环，剩下25%隐藏
   • 进度条（progress-value）用进度长度 75，确保进度在3/4圆的范围内显示
3. stroke-linecap: round：给圆环两端加上圆角，让UI更柔和，贴近你想要的效果
4. JS进度计算：原来的全圆总长度是100，现在3/4圆的有效长度是75，所以进度需要基于75来计算，保证百分比和视觉进度匹配

现在你运行代码，就能得到一个从顶部开始的3/4环形进度条，进度会在这个弧形范围内对应更新啦！

备注：内容来源于stack exchange，提问作者Software Architect