Scrollbarsを使用したFirefox内のSVGの座標変換

Question

SVGファイルがFirefox内から表示されているときにScrollbarが存在するときに、JavaScriptコード内からSVGドキュメントで、ユーザー座標空間で正しいマウス座標を計算しようとしています。しかし、それはまったく正しくありません。これは、SVGが水平または垂直にスクロールされている場合でも、SVGベースのツールチップを正しく描画するために必要です。

IEとFirefoxブラウザ全体で座標変換を正しくしたいと思います。また、ブラウザー固有の条件付きコードを必要としないシングルソースJavaScript+SVGソリューションでこれを行いたいと思います。現在、Firefox 3.5.10を使用していますが、Firefoxの最近のバージョンにアップグレードすることを検討しますが、IEはまだテストしていません。

私が遭遇した問題は、スクロールバーの座標オフセットです。マウス座標変換は、ScrollbarがFirefox内のSVG要素を介して存在する場合は十分ではありません。座標変換を把握するためのデバッグ補助として、私は1つのファイルにJavaScriptハンドラーを含む単純なSVGファイルを使用しています。投稿してください svg_cross_hairs.svg. 。そのファイルをFirefoxにロードし、Scrollbarsが表示されるまでFirefoxウィンドウを短くしてから垂直または水平のスクロールバーをスクロールすると、JavaScriptによって描かれた十字線が水平または垂直スクロールの量の量によって相殺されることがわかります。これは、マウスカーソルが実際にある場所またはその近くにツールチップオブジェクトを描くためには正しくありません。

私は見ます Firefox：ビューポートの左上隅のマウス座標を取得する について語る質問 スクロールトップ 財産。

MSG＃00056 の意味の混乱があることを明確にします element.{pageX,pageY,clientX,clientY} 属性と element.getscreenCTM 方法。

ユーザー座標系で、正しいマウス座標に到達するよりクリーンな方法はありますか？

Answer 1

使用できます evt.pageX / evt.pageY また window.pageXOffset / window.pageYOffset SVGがスクロールされていても機能するものに到達するには。