0

如果有人可以帮助我解决这个 svg 问题，我正在徘徊。如何获取 svg 对象的鼠标坐标版本。通常当用户点击页面时，点击事件被触发，并且对象在 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.
})();
4

2 回答 2

4

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

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

于 2013-06-21T02:41:48.560 回答
0

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

于 2015-02-13T16:35:58.757 回答