I need a pair of fresh eyes to show me what I am doing wrong.

I want to get height and width and use them to work out the position of another element.

HTML

<g>

    <rect

        class=graphic

        draggable=data

        ng-attr-x={{ data.x }}

        ng-attr-y={{ data.y }}

        ng-attr-height={{ data.height }}

        ng-attr-width={{ data.width }}

    ></rect>

</g>

Function for returning values I want

function getSVGRectDimensions(element) {

    //logging

    console.log('firstChild', element[0].firstElementChild);

    console.log('firstChild.Clientrect', element[0].firstElementChild.getBoundingClientRect());



    var viewportOffset = element[0].firstElementChild.getBoundingClientRect();

        if (!element.jquery) {

            element = angular.element(element);

        }

        return {

            left: viewportOffset.left,

            height: viewportOffset.height,

            top: viewportOffset.top,

            width: viewportOffset.width

        }

    }

How I use the function

var svgElement = getSVGRectDimensions(data.element);

In the console I get

From the logs, you can see that height and width of rect > 0.

<rect class=graphic draggable=data ng-attr-x={{ data.x }} ng-attr-y={{ data.y }} ng-attr-height={{ data.height }} ng-attr-width={{ data.width }} x=1033.78 y=364 height=46.22000000000003 width=106.8900000000001></rect>

And yet, when I call the function with getBoundingClientRect(), height and width = 0.

firstChild.Clientrect ClientRect {} bottom: 60.999996185302734 height: 0 left: 681.1538696289062 right: 681.1538696289062 top: 60.999996185302734 width: 0 __proto__: ClientRect

Why is that happening?

I also tried to get rid of firstElementChild, which results in returning g instead of rect but still height and width = 0.