Как использовать `element.offsetParent` с элементами SVG HTML?

Question

Я выполняю обслуживание некоторого JavaScript, который использует свойство .offsetParent.В последних изменениях теперь приложение использует элементы SVG, и они нарушают JavaScript, поскольку mySvgElement.offsetParent всегда undefined.

Является ли .offsetParent стандартным, и не работает ли оно с элементами SVG?Если да, что является альтернативой .offsetParent при работе с элементами HTML5 SVG?

Answer 1

offsetParent не существует в SVG.

Чтобы получить координаты ограничивающего прямоугольника узла SVG, вы обычно используете метод getBBox для элемента SVG.Это возвращает 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 - нет (но я думаю, что он должен работать).

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 г. offsetParent будет удален

Вы можете использовать "getBoundingClientRect ()"

для получения дополнительной информации: https://www.chromestatus.com/features/5724912467574784