SVG | y坐标不同

Question

SVG文件：http://pastebin.com/8N61VpS1

<rect
   style="fill:#000000"
   id="rect3409"
   width="166.39345"
   height="180.32787"
   x="77.049179"
   y="611.37854" />

矩形“rect3409”在Inkscape 0.91 r13725中的坐标为(x,y)=(77.049,260.656)。

然而，具有id“rect3409”的<rect>标签的坐标为(x,y)=(77.049,611.379)。为什么两者之间存在差异？

我想获取矩形的正确SVG坐标。我该如何做？

- hans-t

---

附上了SVG XML文件，请查看。我对SVG和Inkscape都很陌生。 - hans-t

Inkscape有自己的坐标系，与SVG坐标完全分离。你要找到哪个是“正确”的坐标？ - r3mainer

SVG坐标。我会编辑问题的。 - hans-t

@squeamishossifrage，我觉得那不太对，你有参考资料吗？我发现从Inkscape中获取坐标的一个问题是它倾向于将元素放在带有“transform”的组内，因此例如“rect”上的“x”属性不是最终位置，您需要将所有嵌套组上的所有变换组合回父“svg”元素。 - Jeremy

@squeamishossifrage 再想一想：您的意思是Inkscape将y = 0放在图像底部，并向上屏幕增加y，而SVG通常将y = 0放在顶部，并向下屏幕增加y？ - Jeremy

Answer 1

如果您查看源代码，会发现#rect3409有一个父元素g：

<g transform="translate(0,-452.36216)">
  <!-- snip -->
  <rect
    id="rect3409"
    width="166.39345"
    height="180.32787"
    x="77.049179"
    y="611.37854" />
</g>

transform=translate(tx, ty) 属性应用于 #rect3409 的尺寸。所以矩形的垂直轴从 y + ty 到 y + h + ty，即从 611 - 452 == 159px 到 611 + 180 - 452 == 339px。 我认为这些是您想要的“正确SVG坐标”值。 但是Inkscape报告的不是这些值，而是261px到441px。看起来Inkscape实际上翻转了y轴：在SVG中（以及传统的所有计算机图形中），y=0位于屏幕顶部，并且随着向下移动，y增加。例如，以下SVG显示一个红色框在蓝色框上方：

<svg>
  <rect x="0" y="0" width="10" height="10" fill="red" />
  <rect x="0" y="10" width="10" height="10" fill="blue" />
</svg>

在 Inkscape 中，数学约定是底部为 y=0，上升时 y 增加。因此，在 Inkscape 中看到的坐标已经被修改过了，与“真实”的 SVG 坐标不同（感谢@squeamish ossifrage在评论中指出这一点）：y_Inkscape = h_image - y_SVG，其中y_Inkscape是Inkscape给你的，y_SVG是文件中的坐标，h_image是总图像高度。

您的示例图像恰好为600px高，因此#rect3409的“Inkscape”坐标为
600 - 339 == 261px，和
600 - 159 == 441px。

- Jeremy