如何将 `element.offsetParent` 与 HTML SVG 元素一起使用？答案

【问题标题】：How to use `element.offsetParent` with HTML SVG elements?如何将 `element.offsetParent` 与 HTML SVG 元素一起使用？
【发布时间】：2011-05-13 18:08:14
【问题描述】：

我正在对一些使用.offsetParent 属性的javascript 进行维护。最近的更改现在使应用程序使用 SVG 元素，并且它们破坏了 JavaScript，因为 mySvgElement.offsetParent 始终是 undefined。

.offsetParent 是标准的，它不适用于 SVG 元素吗？如果是这样，当使用 HTML5 SVG 元素时，.offsetParent 的替代方法是什么？

【问题讨论】：

标签： javascript html svg

【解决方案1】：

offsetParent 在 SVG 中不存在。

要获取 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 还没有（但我认为它应该可以工作）。

【讨论】：

【解决方案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());

【讨论】：

【解决方案3】：

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

您可以使用“getBoundingClientRect()”

【讨论】：