Transformation de coordonnées en SVG dans Firefox avec barres de défilement

Question

Je suis en train de calculer les coordonnées de la souris correcte, en espace de coordonnées utilisateur, dans un document SVG à partir du code Javascript lorsque les barres de défilement viennent à l'existence lorsque ce fichier SVG est vue de l'intérieur FireFox. Mais il est pas tout à fait correct. Cela est nécessaire pour obtenir les info-bulles à base SVG dessiné correctement, même lorsque le SVG est défilement horizontal ou vertical.

Je désire avoir les transformations de coordonnées soient correctes dans les navigateurs IE et Firefox. De plus, je veux le faire avec une seule source Javascript + solution SVG qui ne nécessite pas, espérons-code conditionnel spécifique au navigateur. J'utilise actuellement FireFox 3.5.10, mais je considérerais la mise à niveau vers une version plus récente de FireFox, et je ne l'ai pas encore testé IE.

Le problème est que je suis tombé sur les décalages de coordonnées pour les barres de défilement: La souris transformation de coordonnées ne suffit pas lorsque les barres de défilement entrent en existence sur l'élément SVG dans Firefox. En tant que l'aide de débogage pour comprendre les transformations de coordonnées, je travaille avec un simple fichier SVG qui contient les gestionnaires Javascript, le tout dans un seul fichier, qui attire simplement réticules au niveau du curseur de la souris comme des objets SVG ligne. Trouver affiché à svg_cross_hairs.svg . Si vous chargez ce fichier dans FireFox et raccourcissez la fenêtre FireFox vers le bas jusqu'à ce que les barres de défilement apparaissent, puis faites défiler soit les barres de défilement verticales ou horizontales, vous constaterez que la ligne de mire dessinés par le Javascript sont compensés par le montant de l'une quantité de défilement horizontal ou vertical, ce qui est inexact afin d'en tirer un objet infobulle sur ou à proximité où le curseur de la souris est en fait.

Je ne vois Firefox: Obtenez les coordonnées de la souris du coin supérieur gauche de fenêtre question qui parle de la scrollTop .

msg # 00056 précise qu'il ya confusion la signification des attributs de element.{pageX,pageY,clientX,clientY} et la méthode de element.getscreenCTM.

Y at-il un moyen plus propre pour arriver à la coordonnée souris correcte, dans les coordonnées dans le système utilisateur?

Answer 1

Vous pouvez utiliser evt.pageX / ou evt.pageY window.pageXOffset / window.pageYOffset pour arriver à quelque chose qui fonctionne même si le svg est défilée.