Get screen coordinates of an element

[Carles Codony]

I have 3 SVG elements, One contains the other two, like this:

<svg id="main" width="100%" height="100%">
  <svg id="output" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinyMin">(content)</svg>
  <svg id="gui" width="100%" height="100%">(content)</svg>
</svg>

The 'output' SVG has a ViewBox set and scales proportionally.

The 'gui' SVG element and doesn't scale.

In the contents of the 'output' I want the user to click on them, and show another element on the 'gui' SVG, in the same position of the clicked element.

When I use the element.getBBox() from the 'output' SVG, the coordinates it gives me are correct for the 'output' SVG, but I need them translated for the 'gui' SVG.

Right now, I calculate the size of the SVG based on the div that contains it, retrieve the viewBox of the 'output' SVG and calculate the correct values based on those two things (difference between the viewBox size and the SVG size).

I would like to know if it's possible to get the SVG size directly, or if there's a way to translate SVG coordinates to screen coordinates.

Thank you,

[Ian]

Is it possible to pop it on a jsfiddle ?

[Carles Codony]

Here it is:

http://jsfiddle.net/4ku3H/

The scaled SVG will be an external file, that I want to change, since its size could be bigger than the browser window, I need to rescale it to make it entirely visible. 

The gui SVG will have GUI elements that shouldn't rescale.

Thanks,

[Ian]

Not sure if this is quite what you want, and it feels as though there may be a simpler option, but it may give some idea....

http://jsfiddle.net/4ku3H/4/

$(function(){

    var s = Snap('#stage');

    var icon = s.select('.icn-type-icon');

    var menu = s.select('.icn-type-menu');

    

    //the red box (menu) should show at the center of the blue box (icon)

    icon.click(function(){

        var bbox = icon.getBBox();

        var trans = this.transform().globalMatrix;

        var x = trans.x( bbox.cx, bbox.cy );

        var y = trans.y( bbox.cx, bbox.cy );

        var menbb = menu.getBBox();

        menu.transform('t'+[x - menbb.width/2,y - menbb.height/2] );

    });

    

});

[Carles Codony]

Yes, I think it's exactly what I want, Thank you!