Basically I have an svg "SecondSVG" into an svg "FirstSVG" into an svg "MainSVG".Every svg has its own ViewBox. This page can be loaded anywhere on the screen by another page.
So basically how can i find the screen x for viewBox for"SecondSVG" knowing that this svg can be loaded basically anywhere based on the calling page? event.clientX gives myself the x coordinate for the screen. If I don't know the coordinate for ViewBox of "SecondSVG" then how can I find out the x coordinate inside the ViewBox of "SecondSVG"?

I am using Firefox 3.6.3 and I do have an event object from which I can extract clientX, clientY and other coordinates that are relative to the screen. However what I need are the coordinates inside the ViewBox.

Basically I have an svg "SecondSVG" into an svg "FirstSVG" into an svg "MainSVG".Every svg has its own ViewBox. This page can be loaded anywhere on the screen by another page.
So basically how can i find the screen x for viewBox for"SecondSVG" knowing that this svg can be loaded basically anywhere based on the calling page? event.clientX gives myself the x coordinate for the screen. If I don't know the coordinate for ViewBox of "SecondSVG" then how can I find out the x coordinate inside the ViewBox of "SecondSVG"?

I am using Firefox 3.6.3 and I do have an event object from which I can extract clientX, clientY and other coordinates that are relative to the screen. However what I need are the coordinates inside the ViewBox.

• javascript
• firefox
• svg

• That's strange, the event should give you coordinates local to the target element. I've had good success with this in recent Firefox. Can you link to a page that illustrates this behaviour? – jbeard4 Commented Aug 5, 2010 at 1:20
• I am having the same issue. Did you manage to shed any light on this subject? – Adam Holmes Commented Mar 1, 2011 at 16:22
• 1 Im not getting you, are you trying to convert screen coordinates (clientX, clientY) to SVG coordinates?! – Cipi Commented Apr 12, 2011 at 13:52

1 Answer 1

function click(evt)
{

var root = document.getElementById('your svg');

        var uupos = root.createSVGPoint();

        uupos.x = evt.pageX;

        uupos.y = evt.pageY;

        var ctm = evt.target.getScreenCTM();

        if (ctm = ctm.inverse())

            uupos = uupos.matrixTransform(ctm);



 ///the new x y are : uupos.x , uupos.y 
}