svg，获取位置绝对组答案

【问题标题】：svg, get position absolute groupsvg，获取位置绝对组
【发布时间】：2014-08-29 23:53:22
【问题描述】：

我尝试获取组对象的绝对位置。在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”。

请修复函数计算帮助我！

【问题讨论】：

This question 可能会有所帮助。

标签： javascript jquery html svg d3.js

【解决方案1】：

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

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

还要注意不同的浏览器处理规模不同。 Chrome 可能包括缩放到尺寸，而 IE 没有。因此，对于 200px 宽度缩放 2x 的框，您将在 Chrome 中获得 400px，在 IE 中获得 200px。

希望这会有所帮助。

【讨论】：