web-dev-qa-db-fra.com

Recherche de la position décalée de l'élément SVG

J'ai souvent rencontré ce problème avec D3. Souvent, j'aime superposer des objets HTML sur mon SVG. 

Ma stratégie actuelle consiste à créer une DIV vide à côté de l'élément SVG appelée .html-overlay. Je le positionne en fonction du remplissage interne que j'ai défini dans le SVG pour mon graphique principal (ex: 20px). Ensuite, j'utilise la fonction suivante (avec jQuery) pour déterminer où l'élément HTML devrait aller:

//element is the object returned by D3 .append()
var getOffset: function(element) {
        var $element = $(element[0][0]);
        return {
            left: $element.offset().left - $('.html-overlay').offset().left,
            top: $element.offset().top - $('.html-overlay').offset().top
        };
    }

Je me demande s'il doit y avoir un moyen interne (non dépendant de jQuery) pour obtenir rapidement le décalage d'un élément. C'est très utile (surtout après qu'un élément ait traversé plusieurs translations, rotations, échelles, etc.)

Il serait également intéressant d’avoir des fonctions permettant de déterminer le décalage du "centre" d’un élément, le point le plus haut, le plus bas, le plus à gauche, le plus à droite, etc.

REMARQUE:

La méthode getBoundingClientRect () ne donne pas les bons numéros pour une raison quelconque: 

var $element = $(element[0][0]);

            console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object

ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150
d3.js
23
Toli

as-tu essayé 

var xywh =element[0][0].getBoundingClientRect();

semble avoir tout dedans? (la solution originale est dans cet article ) 

16
Asain Kujovic

Extension de la réponse de James Lai pour prendre en charge les versions modernes d'IE:

function getVpPos(el) {
    if(el.parentNode.nodeName === 'svg') {
        return el.parentNode.getBoundingClientRect();
    }
    return getVpPos(el.parentNode);
}

Remarque: parentElement est remplacé par parentNode .__ et tagName est remplacé par nodeName .

0
pistol-pete