Koordinatentransformation in SVG in Firefox mit Scrollbalken

Question

Ich versuche, die richtigen Mauskoordinaten zu berechnen, im User-Space-Koordinate in einem SVG-Dokument in Javascript-Code, wenn Bildlaufleisten zustande kommen, wenn die SVG-Datei aus FireFox betrachtet wird. Aber es ist nicht ganz richtig. Dies ist erforderlich, SVG-basierte Tooltips korrekt sogar gezogen werden, wenn der SVG horizontal oder vertikal gescrollt.

Ich wünsche die Koordinatentransformationen zu haben, über IE und Firefox-Browser korrekt sein. Auch möchte ich dies mit einer Single-Source Javascript + SVG-Lösung zu tun, dass hoffentlich nicht browserspezifischen bedingten Code erfordert. Ich bin derzeit FireFox 3.5.10, aber ich würde ein Upgrade auf eine neuere Version von FireFox betrachten, und ich habe nicht IE noch nicht getestet.

Das Problem, das ich in lief ist die Koordinaten Offsets für die Scrollbalken: Die Maus Koordinatentransformation ist nicht ausreichend, wenn Bildlaufleisten entstehen über das SVG-Element in Firefox. Als Debug-Hilfe, um herauszufinden, die Koordinatentransformationen, arbeite ich mit einer einfachen SVG-Datei, die Javascript-Handler enthält, die alle in einer Datei, die ein Fadenkreuz an dem Mauszeiger als SVG Linie Objekte einfach zieht. Finden veröffentlicht unter svg_cross_hairs.svg . Wenn Sie die Datei in FireFox laden und das FireFox-Fenster verkürzen, bis Scrollbalken angezeigt wird, und dann scrollen Sie entweder die vertikale oder horizontale Scrollbalken, werden Sie feststellen, dass die von der Javascript gezogen Fadenkreuz durch die Menge der beiden horizontalen oder vertikalen Bildlauf Betrag versetzt sind, die nicht korrekt ist, um ein Tooltip Objekt auf oder in der Nähe, wo sich der Mauscursor zu ziehen tatsächlich ist.

Ich sehe die Firefox: Get Mauskoordinaten der oberen linken Ecke des Ansichtsfenster Frage, dass die Gespräche über die scrollTop Eigenschaft.

msg # 00056 stellt klar, dass es Verwirrung die Bedeutungen von element.{pageX,pageY,clientX,clientY} Attribute und die element.getscreenCTM Methode.

Gibt es eine saubere Art und Weise an der richtigen Maus zu ankommen koordinieren, in dem in Benutzerkoordinatensystem?

Answer 1

Sie können mit evt.pageX / evt.pageY oder window.pageXOffset / window.pageYOffset auf etwas gelangen, auch wenn der svg arbeitet gescrollt wird.