SVG: Obtenir la position d'un élément par rapport à la page

Je veux afficher une superposition html (div) lorsqu'un utilisateur clique sur un élément dans un tel schéma. Pour visualiser le problème, je vais avoir, supposons que l'image SVG a une rangée horizontale de 6 éléments. Lors de l'événement de clic, je reçois l'élément de coordonnées et de les utiliser pour afficher la superposition à côté d'elle. Le problème est que lorsque je clique sur les éléments de gauche à droite, je remarque que le décalage horizontal entre l'élément et la superposition de garde de plus en plus petits. C'est le 6ème élément affiche la superposition beaucoup plus proche que le premier élément. Ce qui se passe dans Chrome et FF, et c'est un problème parce que, parfois, la superposition couvre l'élément lui-même.

J'ai d'abord été à l'aide de JQuery position() de la propriété, qui ne présentent pas le comportement que j'ai décrit ci-dessus, mais il est retourné des valeurs très différentes dans Chrome et Firefox, de plus il n'est pas officiellement pris en charge par JQuery sur les éléments svg. J'ai donc essayé avec DOM standard offsetLeft et offsetTop, ainsi que svg x de.animVal.la valeur de la propriété et de diverses bibliothèques que j'ai trouvé sur le web, mais ils ont tous le même erratiques décalage problème. Je présume que cela se produit parce que le svg image est réduite, donc je suis à la recherche de je moyen de simplement obtenir une svg de la position de l'élément par rapport à la réelle html document qui la contient. Est-il un moyen de faire cela?

OriginalL'auteur JayPea | 2012-03-09