SVG | y坐标不同答案

【问题标题】：SVG | y-coordinate is differentSVG | y坐标不同
【发布时间】：2015-04-01 04:58:27
【问题描述】：

<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 坐标。我该怎么做？

【问题讨论】：

附上svg xml文件，请看。我是 svg 和 inkscape 的新手。
Inkscape 有自己的坐标系统，它与 SVG 坐标完全分离。以下哪些是您要查找的“正确”坐标？
SVG 坐标。然后我会编辑问题。
@squeamishossifrage 这对我来说听起来不对，你有参考吗？我在从 Inkscape 中获取坐标时发现的一个问题是它倾向于将元素放入具有transforms 的组中，因此例如rect 上的x 属性不是最终位置，您需要将所有嵌套组上的所有转换组合回父 svg 元素。
@squeamishossifrage 重新考虑：你的意思是 Inkscape 将y = 0 放在图像底部，并在屏幕上增加y，而 SVG 通常在顶部有 y = 0 ，并在屏幕下方增加y？

标签： svg inkscape

【解决方案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>

g 上的transform=translate(tx, ty) 属性应用于#rect3409 的维度。所以rect的纵轴从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 在 cmets 中指出这一点）：y_Inkscape = h_image - y_SVG，其中 y_Inkscape 是 Inkscape 告诉你的，你， y_SVG 是文件中的内容，h_image 是图像的总高度。

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

【讨论】：