2

当从 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#00056element.{pageX,pageY,clientX,clientY}澄清了属性和element.getscreenCTM方法的含义存在混淆。

在用户坐标系中,是否有更简洁的方法来获得正确的鼠标坐标?

4

1 回答 1

1

即使 svg 被滚动,您也可以使用evt.pageX/evt.pageYwindow.pageXOffset/来获得有效的东西。window.pageYOffset

于 2010-08-10T20:14:07.597 回答