如何将“element.offsetParent”与 HTML SVG 元素一起使用？

发布于 2024-11-07 06:48:19 字数 374 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

明天过后 2024-11-14 06:48:19

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

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

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){
    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 Apache-licensed. getBoundingBoxInArbitrarySpace has been tested, but getBBoxInScreenSpace hasn't (but I think it should work).

回复收藏 0 原文

一指流沙 2024-11-14 06:48:19

offsetParent 不是 SVG 元素的标准属性，尽管某些浏览器可能会提供这一属性。

根据您想要对信息执行的操作，使用 getScreenCTM 或 getCTM 将可能适合你。例如，以下是计算 (0, 0) 相对于元素的像素位置的方法：

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

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

回复收藏 0 原文