SVG

Question

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

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>

g 上的 transform=translate(tx, ty) 属性应用于 #rect3409 的维度。所以rect的纵轴从y + ty到y + h + ty，也就是611 - 452 == 159px到611 + 180 - 452 == 339px。 我认为这些是您想要的 "correct SVG co-ordinate" 值。

但是 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 中看到的坐标是根据 "true" 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.

SVG | y坐标不同

SVG | y-coordinate is different

inkscape