svg，得到位置绝对组

Question

I try to get absolute position of group object. In html I have:

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

I see it have some attr: scale, group_main_translate_x, group_main_translate_y, node_translate_x, node_translate_y, node_x, node_y

I try function: abs_node_x = (node_translate_x + node_x + group_main_translate_x) * scale.

It seem be right: (-3014 + 33 + 3245.914484377907) * 1

But when scale != 1, I have wrong value. Sometime I get "-value" .

Plz fix the function calculate help me!

Answer 1

first, for the question like this let me recommend to use jsFiddle or similar that will show the problem and code.

If I understand the question correctly, your function seem to be right. All you need to do is divide the result by a zoom value.

Also note that different browsers process scale differently. Chrome might include scale zoom into dimensions whereas IE doesn't. So for the box of 200px width scaled by 2x you will get 400px in Chrome and 200px in IE.

Hope this helps.