SVG:关于相对路径坐标的混淆

时间:2017-03-01 14:29:57

标签: svg coordinates

我试图将由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)(有一些四舍五入)。

为什么这是错的?

1 个答案:

答案 0 :(得分:0)

我自己想出来了。

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