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
Vous devez vous connecter pour publier un commentaire.
Dans le cas où vous n'avez pas travaillé sur quelque chose depuis le mois de Mars (et pour quelqu'un d'autre d'avoir ce problème), essayez de
getBoundingClientRect()
sur votre SVG nœud.Renvoie une
ClientRect
objet qui vous donne en haut, en bas, à gauche, à droite, la largeur et la hauteur par rapport au document. A été en mesure de l'utiliser pour la position de Twitter Bootstrap popovers (divs) à côté de SVG rects.Droit - pas de défilement. Est-il une solution?
Utiliser les
document.body.scrollTop
/document.body.scrollLeft
pour obtenir la page des décalages de défilement.OriginalL'auteur Adam Mayer
de jQuery
position()
ne fonctionne pas bien pour les éléments SVG. Il est un billet.Vous pouvez utiliser le natif SVG méthode
getBBox()
pour obtenir la position d'un élément SVG.Exemple
OriginalL'auteur Voles
Vous pouvez obtenir la coordonnée de position par rapport à la page de n'importe quel élément, aussi <svg>, avec cette petite fonction:
var offset = getOffset(svg);
var x = offset.gauche;
var y = décalage.haut;
démo live: https://codepen.io/martinwantke/pen/rpNLWr
Merci pour le partage, mais si vous voulez le décalage d'un élément SVG pour le document SVG?
OriginalL'auteur Martin Wantke