jQueryUI 选项卡中 SVG 的 QuirksMode 鼠标位置不正确？答案

【问题标题】：QuirksMode mouse position incorrect for SVG in a jQueryUI tab?jQueryUI 选项卡中 SVG 的 QuirksMode 鼠标位置不正确？
【发布时间】：2012-02-04 08:13:33
【问题描述】：

我刚刚注意到一些奇怪的事情。如果我绘制一个 SVG 形状，当使用返回鼠标位置的标准方法时，我作为形状的 x 和 y 属性提供的坐标与该形状上的鼠标事件返回的坐标不匹配。

比如我画一个矩形如下：

shape = svgDocument.createElementNS(svgNS, "rect");
shape.setAttributeNS(null, "x", rect_x);
shape.setAttributeNS(null, "y", rect_y);
...
shape.addEventListener("mouseover", etc);

在事件例程中，我使用 QuirksMode 算法（“检测鼠标坐标的正确脚本”，http://www.quirksmode.org/js/events_properties.html）获取鼠标位置。对于 Y 坐标，我必须按如下方式更正 QuirksMode 值，才能到达“rect_y”：

F/F 8  subtract 105
Webkit subtract 103
IE9    subtract 104
Opera  subtract 103

同样令人好奇的是，Webkit 和 IE9 都提供了 evt.offsetY，并将其设置为“正确”的位置（正好等于“rect_y”）。 FF 未定义 offsetY，Opera 将其设置为 1。

我怀疑问题出在 jQueryUI 选项卡中，尽管我还没有解决这个问题。有人见过这个吗？有什么想法吗？

【问题讨论】：

标签： svg mouseover jquery-ui-tabs

【解决方案1】：

在 SVG 中，您将使用 getScreenCTM 方法来转换坐标而不是 offsetX 或 offsetY 等。这里有一个示例：http://www.carto.net/svg/eventhandling/ 搜索将 clientX 转换为 viewBox 坐标部分。这有点复杂，因为它试图处理没有 getScreenCTM 方法的旧 UA，例如 ASV3。

【讨论】：