如何将SVG环形进度条的纯色描边替换为红黄绿锥形渐变？

SVG的<circle>描边无法直接应用CSS锥形渐变，我们可以通过SVG遮罩+渐变背景的方式实现需求，以下是完整修改方案：

1. 修改SVG结构 #

添加<defs>定义遮罩和锥形渐变（用线性渐变模拟锥形效果，配合旋转实现环形渐变）：

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  <defs>
    <!-- 定义环形遮罩，用于裁剪渐变背景，控制进度显示 -->
    <mask id="progress-mask">
      <!-- 白色填充作为遮罩基底 -->
      <rect width="100%" height="100%" fill="white" />
      <!-- 遮罩中的环形，通过stroke-dasharray控制进度 -->
      <circle cx="16" cy="16" r="15.9155" fill="none" stroke="black" 
              stroke-width="1.8" stroke-dasharray="100 100" 
              stroke-dashoffset="100" class="js-progress-mask" />
    </mask>
    <!-- 定义三色锥形渐变（通过线性渐变+旋转模拟） -->
    <linearGradient id="conic-gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="33%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>

  <!-- 背景环形 -->
  <circle cx="16" cy="16" r="15.9155" class="progress-bar__background" />
  
  <!-- 带渐变的进度层：矩形应用渐变，通过遮罩显示环形进度 -->
  <rect width="100%" height="100%" fill="url(#conic-gradient)" 
        mask="url(#progress-mask)" transform="rotate(-90 16 16)" />
</svg>

2. 更新CSS样式 #

移除原进度条的纯色描边样式，改为控制遮罩中的环形：

$progress-bar-stroke-width: 1.8;
$progress-bar-size: 300px;

svg {
  height: $progress-bar-size;
  width: $progress-bar-size;
}

.progress-bar__background {
  fill: none;
  stroke: #e2eff0;
  stroke-width: $progress-bar-stroke-width;
}

// 控制遮罩中的环形进度
.js-progress-mask {
  fill: none;
  stroke: black;
  stroke-width: $progress-bar-stroke-width;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s ease-in-out;
}

3. 调整JS逻辑 #

将进度控制目标从原进度环形改为遮罩中的环形：

var percentageComplete = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var progressMask = $(".js-progress-mask");
progressMask.css("stroke-dashoffset", strokeDashOffsetValue);

原理说明 #

• 用<mask>创建一个环形镂空区域，通过stroke-dasharray控制镂空的长度（即进度）；
• 用带线性渐变的矩形作为背景，旋转后模拟锥形渐变效果；
• 遮罩会只显示矩形与环形镂空重合的部分，最终呈现出带锥形渐变的环形进度条。

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