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)。

但是，标签 <rect>与 ID rect3409有 (x, y) = (77.049, 611.379)。为什么两者之间存在差异？

我想获得矩形的正确 SVG 坐标。我怎么做？

Answer 1

如果您查看源代码，您会看到 #rect3409有 parent 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) g 上的属性应用于 #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 在评论中指出这一点): y_Inkscape = h_image - y_SVG ，其中 y_Inkscape是 Inkscape 告诉你的，你， y_SVG是文件中的内容， h_image是总图像高度。

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