SVG 到屏幕坐标

SVG to Screen Coordinate

本文关键字：屏幕坐标 SVG      更新时间：2023-09-26

如果有人可以帮助我解决这个 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.
})();

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

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

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

相关文章：