Firefox中的SVG坐标转换滚动条

Question

我想从JavaScript代码中的SVG文档中的用户坐标空间中计算正确的鼠标坐标，当从FireFox中查看该SVG文件时，滚动条出现。但这并不完全正确。即使在SVG水平或垂直滚动​​时，也需要这样才能正确绘制基于SVG的工具提示。

我希望IE和Firefox浏览器中的坐标转换是正确的。另外，我想用单一来源的Javascript + SVG解决方案做到这一点，希望它不需要特定于浏览器的条件代码。我目前使用FireFox 3.5.10，但我会考虑升级到更新版本的FireFox，并且我还没有测试过IE。

我遇到的问题是滚动条的坐标偏移量：当滚动条在Firefox内部的SVG元素上存在时，鼠标坐标转换不足。作为一种调试辅助工具来计算坐标转换，我正在使用一个包含Javascript处理程序的简单SVG文件，它们都在一个文件中，只需在鼠标光标上绘制十字线作为SVG线对象。找到它张贴在svg_cross_hairs.svg。如果将该文件加载到FireFox中并缩短FireFox窗口，直到出现滚动条，然后滚动垂直或水平滚动条，则会发现由Javascript绘制的十字线被水平或垂直滚动​​量的数量抵消，这是不正确的，以便在鼠标光标的实际位置上或附近绘制工具提示对象。

我看到Firefox: Get mouse coordinates of top-left corner of viewport问题，谈论scrollTop财产。

msg#00056阐明了element.{pageX,pageY,clientX,clientY}属性和element.getscreenCTM方法的含义混淆。

在用户坐标系中，是否有一种更简洁的方式来获得正确的鼠标坐标？

Answer 1

您可以使用evt.pageX/evt.pageY或window.pageXOffset/window.pageYOffset即使svg滚动，也可以使用该功能。