Firefox 中 SVG 中带有滚动条的坐标转换
当从 FireFox 中查看 SVG 文件时出现滚动条时，我试图从 Javascript 代码中计算用户坐标空间中 SVG 文档中正确的鼠标坐标。但这并不完全正确。即使 SVG 水平或垂直滚动，也需要正确绘制基于 SVG 的工具提示。
我希望 IE 和 Firefox 浏览器之间的坐标转换正确。另外，我想使用单源 Javascript+SVG 解决方案来做到这一点，希望不需要特定于浏览器的条件代码。我目前使用的是FireFox 3.5.10，但我会考虑升级到更新版本的FireFox，而且我还没有测试过IE。
我遇到的问题是滚动条的坐标偏移：当滚动条出现在 Firefox 内的 SVG 元素上时，鼠标坐标转换是不够的。作为找出坐标转换的调试辅助工具，我正在使用一个简单的 SVG 文件，其中包含 Javascript 处理程序（全部在一个文件中），该文件只是将鼠标光标处的十字准线绘制为 SVG 线条对象。可以在 svg_cross_hairs.svg 找到它。如果将该文件加载到 FireFox 中并缩短 FireFox 窗口直到出现滚动条，然后滚动垂直或水平滚动条，您会发现 Javascript 绘制的十字准线偏移了水平或垂直滚动量，为了在鼠标光标实际所在的位置或附近绘制工具提示对象，这是不正确的。
我确实看到 Firefox：获取顶部的鼠标坐标视口左角 问题，讨论 scrollTop 属性。
msg#00056 澄清了以下含义的混淆element.{pageX,pageY,clientX,clientY} 属性和 element.getscreenCTM 方法。
在用户坐标系中是否有更清晰的方法来获得正确的鼠标坐标？
I am trying to calculate the correct mouse coordinates, in user coordinate space, in an SVG document from within Javascript code when scrollbars come into existence when that SVG file is viewed from within FireFox. But it is not quite correct. This is needed to get SVG-based tooltips drawn correctly even when the SVG is scrolled horizontally or vertically.
I desire to have the coordinate transformations be correct across IE and Firefox browsers. Also, I want to do this with a single-source Javascript+SVG solution that hopefully does not require browser-specific conditional code. I am currently using FireFox 3.5.10, but I would consider upgrading to a more recent version of FireFox, and I have not tested IE yet.
The problem I ran into is the coordinate offsets for the scrollbars: The mouse coordinate transformation is not sufficient when scrollbars come into existence over the SVG element inside Firefox. As a debugging aid to figure out the coordinate transformations, I am working with a simple SVG file that contains Javascript handlers, all in one file, that simply draws crosshairs at the mouse cursor as SVG line objects. Find it posted at svg_cross_hairs.svg. If you load that file into FireFox and shorten the FireFox window down until scrollbars appear, and then scroll either the vertical or horizontal scrollbars, you will find that the crosshairs drawn by the Javascript are offset by the amount of either horizontal or vertical scrolling amount, which is not correct in order to draw a tooltip object on or near where the mouse cursor actually is.
I do see the Firefox: Get mouse coordinates of top-left corner of viewport question that talks about the scrollTop property.
msg#00056 clarifies that there is confusion of the meanings of element.{pageX,pageY,clientX,clientY} attributes and the element.getscreenCTM method.
Is there a cleaner way to arrive at the correct mouse coordinate, in the in user coordinate system?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用
evt.pageX/evt.pageY或window.pageXOffset/window.pageYOffset来达到某些目的即使 svg 滚动也有效。You can use
evt.pageX/evt.pageYorwindow.pageXOffset/window.pageYOffsetto arrive at something that works even if the svg is scrolled.