javascript - svg，获取位置绝对组

Question

我尝试获取组对象的绝对位置。 在 html 中我有:

<svg width="1301" height="388">
  <g transform="translate(3245.914484377907,2040.9185616875811)scale(1.0)">
    <g class="node" data-toggle="popover" data-placement="bottom" transform="translate(33,50)">
      <image xlink:href="/thumb_glyphicons/commons/stack-overflow.png" x="-3014" y="-1905" width="64" height="64" transform="rotate(0 -2982,-1873)"></image>
      <text x="-2982" y="-1819" text-anchor="middle" font-size="12.8px">absolute position</text>
    </g>
  </g>
</svg>

我看到它有一些属性:scale, group_main_translate_x, group_main_translate_y, node_translate_x, node_translate_y, node_x, node_y

我尝试函数:abs_node_x = (node_translate_x + node_x + group_main_translate_x) * scale。

似乎是对的:(-3014 + 33 + 3245.914484377907) * 1

但是当 scale != 1 时，我得到了错误的值。有时我会得到“-value”。

请修复计算函数帮助我!

Answer 1

首先，对于这样的问题，我建议使用 jsFiddle 或类似的工具来显示问题和代码。

如果我正确理解问题，你的功能似乎是正确的。您需要做的就是将结果除以缩放值。

另请注意，不同浏览器的进程缩放比例不同。 Chrome 可能包含缩放尺寸，而 IE 则没有。因此，对于宽度为 200 像素的框，按 2 倍缩放，您将在 Chrome 中获得 400 像素，在 IE 中获得 200 像素。

希望这对您有所帮助。