基于分数的SVG渐变环形实现及路径M坐标计算咨询

一、实现分段渐变环形 #

要实现0-100分、每20%分段切换样式的环形进度条，有两种实用方案：

方案1：stroke-dasharray+渐变快速实现 #

通过定义分段线性渐变，配合圆环描边的虚线属性，可快速控制进度：

<svg viewBox="0 0 200 200" width="200" height="200">
  <!-- 定义5段渐变，对应0-20%/20-40%/40-60%/60-80%/80-100% -->
  <linearGradient id="segmentGradient" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#ff4444" />
    <stop offset="20%" stop-color="#ff4444" />
    <stop offset="20%" stop-color="#ffbb33" />
    <stop offset="40%" stop-color="#ffbb33" />
    <stop offset="40%" stop-color="#00C851" />
    <stop offset="60%" stop-color="#00C851" />
    <stop offset="60%" stop-color="#33b5e5" />
    <stop offset="80%" stop-color="#33b5e5" />
    <stop offset="80%" stop-color="#aa66cc" />
    <stop offset="100%" stop-color="#aa66cc" />
  </linearGradient>

  <!-- 灰色背景环 -->
  <circle cx="100" cy="100" r="80" fill="none" stroke="#eee" stroke-width="20" />

  <!-- 进度环：60%进度，周长=2*π*80≈502.65，60%长度=502.65*0.6≈301.59 -->
  <circle cx="100" cy="100" r="80" fill="none" stroke="url(#segmentGradient)" stroke-width="20"
          stroke-dasharray="301.59 201.06" stroke-dashoffset="0" transform="rotate(-90 100 100)" />
</svg>

• transform="rotate(-90 100 100)" 将圆环起点从右侧转到顶部，符合常规进度条视觉习惯
• 修改stroke-dasharray第一个值即可调整进度（比如80%对应402.12，100%对应502.65）

方案2：分段绘制Path弧 #

如果需要更精细的分段控制（比如单独加动画），可为每个20%扇区绘制独立Path弧：

<svg viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <style>
      .ring-bg { fill: none; stroke: #eee; stroke-width: 20; }
      .segment { fill: none; stroke-width: 20; }
      .s0 { stroke: #ff4444; }
      .s1 { stroke: #ffbb33; }
      .s2 { stroke: #00C851; }
      .s3 { stroke: #33b5e5; }
      .s4 { stroke: #aa66cc; }
    </style>
  </defs>

  <!-- 背景环 -->
  <circle cx="100" cy="100" r="80" class="ring-bg" />

  <!-- 绘制60%进度：前3个20%分段 -->
  <!-- 0-20%：顶部(100,20) → 顺时针转72度到(176.09,75.28) -->
  <path class="segment s0" d="M100,20 A80,80 0 0,1 176.09,75.28" />
  <!-- 20-40%：上一段终点 → 顺时针再转72度到(176.09,124.72) -->
  <path class="segment s1" d="M176.09,75.28 A80,80 0 0,1 176.09,124.72" />
  <!-- 40-60%：上一段终点 → 顺时针再转72度到(100,180) -->
  <path class="segment s2" d="M176.09,124.72 A80,80 0 0,1 100,180" />
</svg>

二、Path M指令的坐标计算逻辑 #

M是SVG Path的「移动到」指令，用来设置路径起点，对于环形弧来说，坐标由圆心、半径、起始角度计算得出：

核心公式 #

SVG坐标系以X轴向右、Y轴向下为正方向，角度从X轴正方向（右侧）开始顺时针递增。给定圆心(cx, cy)、半径r、起始角度θ（单位：度），起点坐标公式为：

// 角度转弧度（Math.cos/sin仅接受弧度参数）
const rad = θ * Math.PI / 180;
const x = cx + r * Math.cos(rad);
const y = cy + r * Math.sin(rad);

实例计算 #

以方案2中的起点M100,20为例：

• 圆心(cx, cy) = (100, 100)，半径r=80
• 起始角度为270度（对应顶部位置）
• 计算：

  const rad = 270 * Math.PI / 180; // 4.712弧度（即3π/2）
  const x = 100 + 80 * Math.cos(rad); // cos(270°)=0 → x=100
  const y = 100 + 80 * Math.sin(rad); // sin(270°)=-1 → y=20
  

这就是M100,20的由来。

弧终点坐标计算 #

Path中A指令的终点坐标用同样公式计算：比如20%分段对应72度，从270度顺时针转72度后角度为270+72=342度，代入公式即可得到终点(176.09,75.28)。

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