如何让SVG环形进度条支持显示超过100%的数值？

我帮你整理了这个完美适配需求的环形图表方案，通过多层SVG路径分层实现，彻底解决了之前透明度叠加效果不佳的问题，同时支持展示超过100%的消费数值：

完整SVG结构 #

<svg viewBox="0 0 36 36" class="circular-chart cons">
  <!-- 灰色背景环 -->
  <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
  <!-- 基准值（上月）100%环形 -->
  <path class="circle-round" stroke-dasharray="100 100" style="opacity: 0.9;" d="M33.9155 18 a 15.9155 15.9155 0 0 1 -31.831 0 a 15.9155 15.9155 0 0 1 31.831 0" />
  <!-- 当前值（当月）119%环形 -->
  <path class="circle-round" stroke-dasharray="19 100" d="M33.9155 18 a 15.9155 15.9155 0 0 1 -31.831 0 a 15.9155 15.9155 0 0 1 31.831 0" />
  <!-- 中心百分比文本 -->
  <text x="18" y="20.35" class="percentage cons-fill">119%</text>
</svg>

对应的CSS样式 #

/* 背景环样式 */
.circle-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 3.8;
}

/* 环形进度条通用样式 */
.circle-round{
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

/* 消费类环形的主题色 */
.circular-chart.cons .circle-round {
  stroke: $cons;
}

/* 加载动画：从0开始绘制环形 */
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

/* 中心文本颜色 */
.cons-fill {
  fill: $cons;
}

关键实现细节说明 #

• 分层路径设计：用三层路径分别实现背景环、基准全环、超出部分的环，避免了透明度叠加导致的颜色失真问题，每个环的样式可以独立控制
• 超100%数值处理：通过stroke-dasharray: 19 100来定义超出100%的部分（19是119%-100%的差值），SVG会自动沿着圆环绘制这段额外的长度
• 流畅动画：progress动画让环形从0开始加载，提升用户体验
• 统一颜色管理：使用CSS变量$cons统一控制环形和文本的主题色，后续修改颜色只需要调整变量值即可

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