SVG：关于相对路径坐标的混淆答案

【问题标题】：SVG : Confusion about relative path coordinatesSVG：关于相对路径坐标的混淆
【发布时间】：2017-07-20 22:26:48
【问题描述】：

我正在尝试将由 inkscape 生成的长 SVG 路径切割成几个较小的路径。具体来说，我正在切断这条路：

"m 42.333333,13.895833 c 0,21.166668 21.166666,19.843751 21.166666,19.843751 h 9.260417 c 0,0 19.84375,-11.906251 13.229166,7.9375 -6.614583,19.84375 -13.229166,31.75 -33.072916,21.166667 C 33.072916,52.260417 31.75,13.895833 31.75,13.895833"

我此刻生成的输出是以下路径：

"M 42.333333,13.895833 c 0,21.166668 21.166666,19.843751 21.166666,19.843751"
"M 63.499999,33.739584 l 9.260417,0"
"M 72.760416,33.739584 c 0,0 19.84375,-11.906251 13.229166,7.9375 -6.614583,19.84375 -13.229166,31.75 -33.072916,21.166667"
"M 39.6875,54.906251 c -6.61458400000001,-2.645834 -7.93750000000001,-41.010418 -7.93750000000001,-41.010418"

这是不正确的。可以看到输入和输出here的区别。

如您所见，几乎所有点都是正确的，除了输出的第四条路径与原始路径的对应部分的起点不同。这可能是由于我对 SVG 路径坐标的确切工作原理的理解出现了一些错误。

我到达第四条路径的起点（39.6875,54.906251）如下：

我们从 (42.33333,13.895833) 开始。然后我们曲线到相对位置 (21.166666,19.843751)，这样我们就得到了绝对位置 (42.33333+21.166666,13.895833+19.843751) = (63.499996,33.739584)。然后使用相对 x 坐标为 9.260417 的水平线扩展路径。这样就给出了新的绝对位置 (63.499996 + 9.260417, 33.739584 + 0) = (72.760413,33.739584)。然后我们曲线到相对位置（-33.072916,21.166667）。将第四条路径的起始位置设为 (72.760413-33.072916,33.739584+21.166667) = (39.6875,54.906251)（进行一些舍入）。

为什么会这样？

【问题讨论】：

标签： svg coordinates

【解决方案1】：

我自己想通了。

问题是由于第三条曲线实际上是由 2 条三次曲线组成的多贝塞尔曲线引起的。第二个三次贝塞尔曲线的坐标应该是相对于它的起点，而不是整个多边形的起点。

【讨论】：