Comment utiliser `element.offsetparent` avec des éléments HTML SVG?

offsetParent n'existe pas dans SVG.

Pour obtenir les coordonnées de la boîte de sélection d'un nœud SVG, vous utilisez généralement la méthode GetBbox sur l'élément SVG. Cela renvoie une BBOX dans le système de coordonnées local de cet élément. Pour déterminer l'emplacement de l'élément SVG dans les coordonnées d'écran, vous utilisez GeCreCreencTM sur l'élément pour obtenir une matrice de transformation qui transformera les coordonnées locales de cet élément en coordonnées à l'écran. Vous transformez ensuite la BOX retournée par la matrice de transformation renvoyée. Voici un code pour le faire: P>

function getBoundingBoxInArbitrarySpace(element,mat){
    var svgRoot = element.ownerSVGElement;
    var bbox = element.getBBox();

    var cPt1 =  svgRoot.createSVGPoint();
    cPt1.x = bbox.x;
    cPt1.y = bbox.y;
    cPt1 = cPt1.matrixTransform(mat);

    // repeat for other corner points and the new bbox is
    // simply the minX/minY  to maxX/maxY of the four points.
    var cPt2 = svgRoot.createSVGPoint();
    cPt2.x = bbox.x + bbox.width;
    cPt2.y = bbox.y;
    cPt2 = cPt2.matrixTransform(mat);

    var cPt3 = svgRoot.createSVGPoint();
    cPt3.x = bbox.x;
    cPt3.y = bbox.y + bbox.height;
    cPt3 = cPt3.matrixTransform(mat);

    var cPt4 = svgRoot.createSVGPoint();
    cPt4.x = bbox.x + bbox.width;
    cPt4.y = bbox.y + bbox.height;
    cPt4 = cPt4.matrixTransform(mat);

    var points = [cPt1,cPt2,cPt3,cPt4]

    //find minX,minY,maxX,maxY
    var minX=Number.MAX_VALUE;
    var minY=Number.MAX_VALUE;
    var maxX=0
    var maxY=0
    for(i=0;i<points.length;i++)
    {
        if (points[i].x < minX)
        {
            minX = points[i].x
        }
        if (points[i].y < minY)
        {
            minY = points[i].y
        }
        if (points[i].x > maxX)
        {
            maxX = points[i].x
        }
        if (points[i].y > maxY)
        {
            maxY = points[i].y
        }
    }

    //instantiate new object that is like an SVGRect
    var newBBox = {"x":minX,"y":minY,"width":maxX-minX,"height":maxY-minY}
    return newBBox; 
}   

function getBBoxInScreenSpace(element){
    return getBoundingBoxInArbitrarySpace(element,element.getScreenCTM());
}

offsetParent n'est pas une propriété standard d'éléments SVG, bien que certains navigateurs puissent en fournir une de toute façon.

Selon ce que vous voulez faire avec les informations, en utilisant getScreenctm ou getctm va probablement fonctionner pour vous. Par exemple, voici comment calculer la position en pixels de (0, 0) par rapport à l'élément: xxx