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. / 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.
})();

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/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.
})();

• javascript
• svg

• 1 according to this 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 Commented Jun 20, 2013 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 Commented Jun 20, 2013 at 23:24

2 Answers 2

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/HBmYV/1/

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;