Question

如果有任何人可以帮我解决这个svg问题，我就会徘徊。如何获取svg对象的鼠标坐标版本。通常当用户点击页面时，click事件会触发，对象在x和y方面具有鼠标位置。在我的情况下，我不想用事件来做。通过简单地检查svg对象的属性，如x和y坐标，可以获得鼠标位置吗？我把一个示例页面放在一起，希望它能让它更清晰。 http://jsfiddle.net/kenny12/XBCHF/ 是链接。摘录是：

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

Answer 1

你为什么不想参加活动？这就是他们的目的。如果您正在处理鼠标坐标，只需在对象上粘贴标准DOM事件侦听器，然后在触发时，使用event.target.getBoundingClientRect()函数作为元素在屏幕上的位置，以及event.offsetX / screenX和事件。 mouseY坐标的offsetY / screenY属性。

简单的示威者：http://jsfiddle.net/HBmYV/1/

Answer 2

你也可以使用事件层，如果svg元素位于页面上除0,0之外的某个位置p.x =event.layerX || event.clientX;

，那么效果会更好

SVG到屏幕坐标

2 个答案: