SVG绝对路径C命令转相对c命令结果不符，寻求技术解答

尝试将SVG路径d属性中的三次贝塞尔曲线绝对C命令转换为相对c命令，理论上两者绘制结果应一致，但实际测试结果不同。自认为数值计算正确，但结果不符合预期，附上测试代码，求解释问题所在。

测试代码：

<svg width="200" height="200" viewBox="50 100 200 200" xmlns="http://www.w3.org/2000/svg">

<g id="boom" stroke="green" stroke-width="0.75" fill="lightblue"> 
   <path d="M 100,200 C 105,190 95,170 100,160 "/>
   <path d="M 150,200 c 5,-10 -10,-20 5,-10 "/>
</g>
<g id="circles" stroke="none" fill="red"> 
   <circle cx="105" cy="190" r="1"/>
   <circle cx= "95" cy="170" r="1"/>
   <circle cx="100" cy="160" r="1"/>
   <circle cx="155" cy="190" r="1"/>
   <circle cx="145" cy="170" r="1"/>
   <circle cx="150" cy="160" r="1"/>
</g>
</svg>

你的核心问题是相对坐标的计算完全错误。三次贝塞尔曲线的绝对命令C和相对命令c的参数对应关系是：

• 绝对命令格式：C x1,y1 x2,y2 x,y（所有坐标基于SVG坐标系原点）
• 相对命令格式：c dx1,dy1 dx2,dy2 dx,dy（所有坐标基于当前路径的起点，即前一个M或路径终点的坐标）

以第一个路径的M 100,200 C 105,190 95,170 100,160为例，转换为相对坐标时，所有参数都要基于起点(100,200)做差值计算：

• 第一个控制点相对值：dx1=105-100=5，dy1=190-200=-10（这部分你算对了）
• 第二个控制点相对值：dx2=95-100=-5，dy2=170-200=-30（你写成了-10,-20，这里错了）
• 终点相对值：dx=100-100=0，dy=160-200=-40（你写成了5,-10，完全错误）

修正后的相对路径命令应该是：M 150,200 c 5,-10 -5,-30 0,-40

替换后的完整SVG代码如下，此时两条曲线会完全重合，红色控制点也会对齐：

<svg width="200" height="200" viewBox="50 100 200 200" xmlns="http://www.w3.org/2000/svg">

<g id="boom" stroke="green" stroke-width="0.75" fill="lightblue"> 
   <path d="M 100,200 C 105,190 95,170 100,160 "/>
   <path d="M 150,200 c 5,-10 -5,-30 0,-40 "/>
</g>
<g id="circles" stroke="none" fill="red"> 
   <circle cx="105" cy="190" r="1"/>
   <circle cx= "95" cy="170" r="1"/>
   <circle cx="100" cy="160" r="1"/>
   <circle cx="155" cy="190" r="1"/>
   <circle cx="145" cy="170" r="1"/>
   <circle cx="150" cy="160" r="1"/>
</g>
</svg>

简单总结：相对命令的每个参数都是目标坐标与当前起点坐标的差值，不是和前一个控制点的差值，你混淆了这个计算逻辑才导致结果不符。

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