SVG 贝塞尔曲线 - 相对（c）和绝对（C）之间的区别

Question

一定有什么不明白的地方。看看我得到的结果。 有人可以解释我遗漏了什么（这一点显然没问题）。

我试图在绝对和相对“坐标”中得到相同的结果。

Answer 1

您的 x/y 计算有误：

要从绝对值中减去的偏移量是相对于上一个命令的最后一个位置/点。

M 100 200 
C 105 190  95 170  100 160  // (M: x:-100, y:-200) 
C 105 140  95 130  100 110  // (preceding C: x:-100, y:-160) 

变成：

M 100 200 
c 5 -10  -5 -30  0 -40 
c 5 -20  -5 -30  0 -50

您已在

C

命令中减去之前的 x/y 值。

svg{
height:20em;
overflow:visible;
}

<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev" 
d="M 100 200 
C 105 190 95 170 100 160 
C 105 140 95 130 100 110" 
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>

<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev" 
d="M 100 200 
c 5 -10  -5 -30  0 -40 
c 5 -20  -5 -30  0 -50" 
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>

您可以使用在线工具轻松地交叉检查您的计算

svg 路径编辑器
svg 路径指挥官