鼠标在自动缩放的SVG中的位置
我正在遇到有关SVG文档中鼠标光标位置的问题。 我想devise一个电位器，它将在拖动时跟随光标，在HTML页面中使用JavaScript 。
我试过evt.clientX / Y和evt.screenX / Y，但是因为我的SVG在自动缩放 ，SVG内部的坐标是不同的。 我一直在寻找一个好几天的答案，但我找不到任何解决scheme（要么实时了解我的SVG缩放因子，要么在SVG坐标系统中有鼠标位置的function）。
轮换将遵循一个简单的规则：
如果（evt.screenX <xc）
ang = Math.atan（（evt.screenY-yc）/（evt.screenX-xc））* 360 /（2 * Math.PI） – 90;
如果（evt.screenX> xc）
ang = Math.atan（（evt.screenY-yc）/（evt.screenX-xc））* 360 /（2 * Math.PI）+90;
以（xc; yc）作为旋转中心，并用SVG内的鼠标坐标replace所有evt.screenX / Y。
看到这个代码，它不仅显示了如何从屏幕空间转换到全局SVG空间，而且还显示了如何将一个点从SVG空间转换到元素的转换空间：
http://phrogz.net/svg/drag_under_transformation.xhtml
简而言之：
// Find your root SVG element var svg = document.querySelector('svg'); // Create an SVGPoint for future math var pt = svg.createSVGPoint(); // Get point in global SVG space function cursorPoint(evt){ pt.x = evt.clientX; pt.y = evt.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); } svg.addEventListener('mousemove',function(evt){ var loc = cursorPoint(evt); // Use loc.x and loc.y here },false); 编辑 ：我已经创build了一个适合您的需求的样本（尽pipe只在全球SVG空间）：
svg/rotate-to-point-at-cursor.svg
它将以下方法添加到上面：
function rotateElement(el,originX,originY,towardsX,towardsY){ var angle = Math.atan2(towardsY-originY,towardsX-originX); var degrees = angle*180/Math.PI + 90; el.setAttribute( 'transform', 'translate('+originX+','+originY+') ' + 'rotate('+degrees+') ' + 'translate('+(-originX)+','+(-originY)+')' ); }
@ Phrogz：感谢你的美好例子，我从中学到了东西。 我已经改变了下面的一些，使之容易一点。 正如我认为像我们在核心Java处理鼠标事件，我们也可以在这里处理相同的方式，所以我在你的例子中尝试我的方式。
我已经删除了“rotateElement”函数，因为我认为这是一些困难，我find一个替代品，如果它。
看下面的代码：
var svg=document.getElementById("svg1"); var pt=svg.createSVGPoint(); var end_small=document.getElementById("end_small"); var line=document.getElementById("line1"); end_small.addEventListener('mousemove', function(evt) { var loc=getCursor(evt); end_small.setAttribute("cx",loc.x); end_small.setAttribute("cy",loc.y); loc = getCursor(evt); // will get each x,y for mouse move line.setAttribute('x2',loc.x); // apply it as end points of line line.setAttribute('y2',loc.y); // apply it as end points of line }, false); function getCursor(evt) { pt.x=evt.clientX; pt.y=evt.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); }
所以我所做的是我只是添加了一个小圆而不是整个SVG的监听器，每次当鼠标移动你我会得到x, y从getCursor()函数如上所述，我会给这个x, y为x2, y2我的线这就是它不翻译，不旋转。 您必须将鼠标移至圆圈，然后慢慢移动，如果鼠标离开圆圈，则线条不会移动，因为我们刚刚只在小圆圈右侧添加了侦听器。
