2

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

IE と Firefox ブラウザ間で座標変換が正しく行われるようにしたいと考えています。また、ブラウザー固有の条件付きコードを必要としない単一ソースの Javascript+SVG ソリューションでこれを行いたいと考えています。私は現在 FireFox 3.5.10 を使用していますが、FireFox のより新しいバージョンにアップグレードすることを検討しており、IE はまだテストしていません。

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

scrollTopプロパティについて説明しているFirefox: ビューポートの左上隅のマウス座標を取得します。

msg#00056element.{pageX,pageY,clientX,clientY}は、属性とelement.getscreenCTMメソッドの意味が混同されていることを明確にしています。

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

4

1 に答える 1

1

evt.pageX/evt.pageYまたはwindow.pageXOffset/を使用window.pageYOffsetして、svg がスクロールされても機能するものにたどり着くことができます。

于 2010-08-10T20:14:07.597 に答える