理解 SVG 坐标系

平面设计 墨景 svg
2022-02-01 16:04:19

我很难理解我的 viewBox 上 SVG 形状的坐标系。在 Inkscape 中,我将页面大小设置为 A4 纸大小(宽度 = 793.70079,高度 = 1122.51969),并且我有一个边长为 100x100 的矩形。当我在 Inkscape 中向上移动矩形时,正如您在下面的第一张图片中看到的那样,y 坐标正在增长,而向下移动会减小 Y 值。在我看来,这与将左上角设置为 (0, 0) 并且 Y 向页面底部增加的概念相反。

朝向左上角的矩形:

在此处输入图像描述

朝向左下角的矩形:

在此处输入图像描述

更具体地说,我的 viewBox 的 (0, 0) 点似乎是左下角而不是左上角(这似乎也适用于我的矩形,因此将其 (x, y) 设置为 (0, 0)在左下角)。有人可以指出我所缺少的吗?

2个回答

它与 SVG 格式无关。这只是 Inkscape 坐标系统的一个小怪癖。页面原点在左下角,对象原点相同,正如你所说的反直觉。

不过不用担心,您可以在 XML 编辑器中找到真正的 SVG 坐标。Shift只需使用++打开它CTRLX然后选择对象,您就会看到真正的 SVG 坐标。如果需要,您还可以在 XML 编辑器中设置实际坐标。

例如:

在此处输入图像描述

使用搜索词“inkscape 反转坐标”,我了解到这是早在 0.48 版本的inkscape 的一个不受欢迎的功能,并且预计将在 v 0.49 进行更正,但截至 0.92 版本,没有任何变化。我发现了对翻转 Y 轴的补丁的引用,但它对我的理解来说太模糊了。

'net 上的其他帖子表明,对于有技能的人来说,创建补丁的优先级较低,因此会出现无休止的延迟。