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

Question

我正在執行一些使用.offsetParent屬性的JavaScript的維護。最近的更改現在有使用SVG元素的應用程序，並且它們正在打破JavaScript，因爲mySvgElement.offsetParent始終爲undefined。

是.offsetParent標準，它不適用於SVG元素嗎？如果是這樣，使用HTML5 SVG元素時，.offsetParent的替代選擇是什麼？

Answer 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沒有（但我認爲它應該可以）。

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