Question

我正在使用.offsetParent属性的某些javascript执行维护。最近的更改现在使用SVG元素的应用程序，它们打破了JavaScript，因为mySvgElement.offsetParent总是undefined。

.offsetParent是否为标准，是否与SVG元素不兼容？如果是这样，在使用HTML5 SVG元素时，.offsetParent的替代方法是什么？

Answer 1

在SVG中不存在offsetParent。

要获取SVG节点的边界框坐标，通常会在SVG元素上使用getBBox方法。这将返回该元素的本地坐标系中的bbox。要确定屏幕坐标中SVG元素的位置，然后在元素上使用getScreenCTM来获取将该元素的本地坐标转换为屏幕坐标的变换矩阵。然后，您可以通过返回的转换矩阵转换返回的bbox。以下是一些代码：

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

此代码取自here，并获得Apache许可。 getBoundingBoxInArbitrarySpace已经过测试，但是getBBoxInScreenSpace还没有（但我认为它应该可行）。

Answer 2

offsetParent不是SVG元素的标准属性，但有些浏览器可能会提供一个。

根据您对信息的处理方式，使用getScreenCTM或getCTM可能会对您有所帮助。例如，以下是如何计算相对于元素的（0,0）像素的位置：

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

Answer 3

“SVGElement.offsetParent”已弃用，将在M50中删除“= 2016年4月offsetParent将被删除

您可以使用“getBoundingClientRect（）”

了解更多信息：https://www.chromestatus.com/features/5724912467574784

如何在HTML SVG元素中使用`element.offsetParent`？

3 个答案: