getBoundingClientRect() doesn't return height and width of SVG rect

Question

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.

Solution

According to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect returns four values: top, left, bottom, right. In your console you can see that these four values are present. Calculating the width and height from these values is trivial

you use:

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

which returns a DOMRect and then later:

return {
        left: viewportOffset.left,
        height: viewportOffset.height,
        top: viewportOffset.top,
        width: viewportOffset.width
    }

as I said, viewportOffset is a DOMRect which does not have properties width and height. Instead they have right, bottom.

so to work out your width and height, your return code should look like this:

return {
        left: viewportOffset.left,
        height: viewportOffset.bottom - viewportOffset.top,
        top: viewportOffset.top,
        width: viewportOffset.right - viewportOffset.left
    }