SVG to Screen Coordinate

Question

I was wandering if any one could help me with this svg problem. How do I get the mouse coordinate version of an svg object. Usually when a user clicks on the page, the click event gets trigger and the object has a mouse position in terms of x and y. In my case, I don't want to do it with an event. Is getting the mouse position possible by simply examining the svg object's properties like the x and y coordinate? I put together an example page, hope it makes it clearer. http://jsfiddle.net/kenny12/XBCHF/ is the link. Excerpt is:

var svg = document.getElementsByTagName('svg')[0];
var pt = svg.createSVGPoint();
var el1 = document.getElementsByTagName('rect')[0];

var log_svgcursorPoint,
log_mouseclick,
log_mousecoord;


function svgcursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    var a = svg.getScreenCTM();
    log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;
    var b = a.inverse();
    return pt.matrixTransform(b);
};
(function(elem){
    elem.addEventListener('mousedown',function(e){
        log_mouseclick = "mouse clicked at"+ " x:" + e.clientX +" y:" + e.clientY ;
        var svgmouse   = svgcursorPoint(e);    
        log_mousecoord = "svg mouse at"+ " x:" + svgmouse.x +" y:" +svgmouse.y;
        document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord;
    },false);
})(el1);
(function calc_manually(){
    var rec = document.getElementsByTagName("rect")[0];
    var root = document.getElementsByTagName("svg")[0];
    var x = rec.getAttribute("x");
    var y = rec.getAttribute("y");
    var CTM = root.getScreenCTM();
// How to get the mouse position these information without using events is the problem.
})();

according to [this](http://stackoverflow.com/questions/2601097/how-to-get-the-mouse-position-without-events-without-moving-the-mouse) answer it's not possible. But what's wrong with having two variable `mouseX` and `mouseY` and updating these variables on every mouse move using events? Then you could just grab those variables when you need the coordinates. — basilikum, Jun 20 '13 at 23:14
That's not what my case is, I need to calculate the screen coordinate of an svg object. Say I have a "5" as an object in an svg coordinate system. How to translate from that coordinate to the screen coordinate is my question. — k.ken, Jun 20 '13 at 23:24

score 4 · Accepted Answer · answered Jun 21 '13 at 02:41

4

Why don't you want an event? That's what they're for. If you're dealing with mouse coordinates, just stick standard DOM event listeners on your objects and then when they trigger, use the event.target.getBoundingClientRect() function for the element's position on-screen, and the event.offsetX/screenX and event.offsetY/screenY properties for the mouse coordinates.

simple demonstrator: http://jsfiddle.net/HBmYV/1/

answered Jun 21 '13 at 02:41

Mike 'Pomax' Kamermans

49,297
16
112
153

For some reason the offsetX or Y doesn't work in FireFox or Chrome. Is there a reason? – k.ken Jun 22 '13 at 18:43
A little confused if the `event.target.getBoundingClientRect()` returns the rect object relative instead or the svg object. – k.ken Jun 22 '13 at 18:56
offsetX/Y are the mouse coordinates relative to the element's (0,0). IE9 and IE10 should support those too. The getBoundingClientRect() + element's (0,0) will give you the absolute position – Mike 'Pomax' Kamermans Jun 22 '13 at 19:23
Thanks for replying, forgot to mention that I have to trigger the click events programmatically. The functions available when I trigger it programmatically is different from ones when I trigger it manually by clicking. Any hints? – k.ken Jun 22 '13 at 19:26
it's just JavaScript. Rebind when your new functions are known. – Mike 'Pomax' Kamermans Jun 23 '13 at 00:09

score 0 · Answer 2 · edited Feb 13 '15 at 16:52

0

you can use event layer as well which works better if the svg element is positioned some where besides 0,0 on the page p.x =event.layerX || event.clientX;

edited Feb 13 '15 at 16:52

lennon310

12,503
11
43
61

answered Feb 13 '15 at 16:35

Kenny

11
2

SVG to Screen Coordinate

2 Answers2