How To Use `element.offsetparent` With Html Svg Elements?

I'm performing maintenance on some javascript which makes use of the .offsetParent property. Recent changes now have the application using SVG elements, and they are breaking the J

Solution 1:

offsetParent does not exist in SVG.

To get the bounding box coordinates of an SVG node, you would typically use the getBBox method on the SVG element. This returns a bbox in the local coordinate system of that element. To determine the location of the SVG element in screen coordinates, then, you use getScreenCTM on the element to get a transformation matrix that will transform that element's local coordinates to screen coordinates. You then transform the returned bbox by the returned transformation matrix. Here's some code to do this:

function getBoundingBoxInArbitrarySpace(element,mat){
    varsvgRoot= element.ownerSVGElement;
    varbbox= element.getBBox();

    varcPt1=  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.varcPt2= svgRoot.createSVGPoint();
    cPt2.x = bbox.x + bbox.width;
    cPt2.y = bbox.y;
    cPt2 = cPt2.matrixTransform(mat);

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

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

    varpoints= [cPt1,cPt2,cPt3,cPt4]

    //find minX,minY,maxX,maxYvar minX=Number.MAX_VALUE;
    var minY=Number.MAX_VALUE;
    var maxX=0var maxY=0for(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 SVGRectvarnewBBox= {"x":minX,"y":minY,"width":maxX-minX,"height":maxY-minY}
    return newBBox; 
}   

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

This code was taken from here, and is Apache-licensed. getBoundingBoxInArbitrarySpace has been tested, but getBBoxInScreenSpace hasn't (but I think it should work).

Solution 2:

offsetParent is not a standard property of SVG elements, although some browsers may provide one anyway.

Depending on what you want to do with the information, using getScreenCTM or getCTM will probably work for you. For example, here's how you might calculate the position in pixels of (0, 0) relative to the element:

var
       matrix = element.getScreenCTM(),
       point = element.createSVGPoint();
   point.x = 0;
   point.y = 0;
   point = point.matrixTransform(matrix.inverse());

Solution 3:

"SVGElement.offsetParent' is deprecated and will be removed in M50" = april 2016 offsetParent will be removed

You can use "getBoundingClientRect()"

for more info : https://www.chromestatus.com/features/5724912467574784