Question

enter image description here

<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>的标记rect3409具有（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>

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是图像的总高度。

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

SVG | y坐标是不同的

1 个答案: