SVG中的'S'命令表示平滑三次贝塞尔曲线，需4个控制点（起点、反射控制点、新控制点、终点），而非3点的二次曲线；错误使用二次公式会导致路径偏移，本文详解控制点推导逻辑与正确参数化实现。
svg中's'命令对应的贝塞尔曲线数学公式解析与实现：svg中的's'命令表示平滑三次贝塞尔曲线，需4个控制点（起点、反射控制点、新控制点、终点），而非3点的二次曲线；错误使用二次公式会导致路径偏移，本文详解控制点推导逻辑与正确参数化实现。
SVG路径命令 S x2 y2, x y（即“smooth cubic Bézier”）绘制的是三次贝塞尔曲线，其数学基础为三次伯恩斯坦多项式：
$$ B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3 \quad (t \in [0,1]) $$
其中 $P_0$ 是当前路径的起始点（即上一条命令的终点，此处为 M 0,100 的 $(0,100)$），$P_3$ 是 S 命令指定的终点 $(200, 0)$，而 $P_1$ 和 $P_2$ 是两个控制点。
关键误区在于：S 命令仅显式提供一个控制点（27,2），它对应的是 $P_2$；而 $P_1$（即第一个控制点）是隐式计算的——它是前一个曲线控制点关于 $P_0$ 的镜像反射点。若前一条命令不是曲线（如本例中直接是 M），则默认前一控制点与 $P_0$ 重合，因此 $P_1 = P_0 = (0, 100)$。
因此，四点坐标应为：
- $P_0 = (x_1, y_1) = (0, 100)$
- $P_1 = (x_2, y_2) = (0, 100)$（反射自“不存在的前控点”，故取起点自身）
- $P_2 = (x_3, y_3) = (27, 2)$（
S命令中第一个坐标对） - $P_3 = (x_4, y_4) = (200, 0)$（
S命令中第二个坐标对）
对应 Canvas 绘制代码需使用三次插值公式：
ctx.beginPath(); ctx.moveTo(x1, y1); for (let t = 0; t <p>⚠️ 注意事项： </p>
- 切勿将
S误当作二次贝塞尔（Q命令）处理；二次公式缺少 $P_1$ 项，必然导致形状失真； - 若前序为
C或S命令，$P_1$ 需按反射规则计算：若上一曲线终点为 $E$、控制点为 $C$，则 $P_1 = 2E - C$； - 数值精度方面，
t步长过大会造成曲线锯齿，建议 ≤0.001；高频循环可用requestAnimationFrame或分段贝塞尔采样优化； - 实际项目中推荐使用成熟库（如
svg-path-parser或bezier-js）解析路径，避免手动推导误差。
掌握 S 命令的三次本质与控制点映射逻辑，是精准复现 SVG 路径数学表达的关键一步。
