How to use the element.offsetParent element with HTML SVG elements?

Question

I am doing some javascript maintenance that uses the .offsetParent property. Recent changes now have an application that uses SVG elements, and they break JavaScript because mySvgElement.offsetParent always undefined .

Is .offsetParent standard, and doesn't it work with SVG elements? If so, what is an alternative to .offsetParent when working with HTML5 SVG elements?

Answer 1

offsetParent does not exist in SVG.

To get the coordinates of a rectangular SVG node frame, you usually use the getBBox method for an SVG element. This returns a bbox in the local coordinate system of this element. To locate the SVG element in screen coordinates, you use getScreenCTM for the element to get a transformation matrix that converts these local element coordinates to screen coordinates. Then you convert the returned bbox using the return transformation matrix. Here is the code for this:

 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()); } 

This code was taken from here and is licensed by Apache. getBoundingBoxInArbitrarySpace has been tested, but getBBoxInScreenSpace does not (but I think it should work).

Answer 2

offsetParent not a standard property of SVG elements, although in any case some browsers may provide it.

Depending on what you want to do with the information, use getScreenCTM or getCTM will probably work for you. For example, here you can calculate the position in pixels (0, 0) relative to an element:

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

Answer 3

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

You can use "getBoundingClientRect ()"

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