getBoundingClientRect() 不返回 SVG 矩形的高度和宽度答案

【问题标题】：getBoundingClientRect() doesn't return height and width of SVG rectgetBoundingClientRect() 不返回 SVG 矩形的高度和宽度
【发布时间】：2015-12-14 05:45:56
【问题描述】：

我需要一双新鲜的眼睛来告诉我我做错了什么。

我想得到height 和width 并用它们来计算另一个元素的位置。

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 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
        }
    }

我如何使用该功能

var svgElement = getSVGRectDimensions(data.element);

在控制台中我得到

从日志中可以看出height 和width 的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>

然而，当我使用 getBoundingClientRect()、height 和 width = 0 调用函数时。

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

为什么会这样？

我还尝试删除firstElementChild，这导致返回g 而不是rect，但仍然是height 和width = 0。

【问题讨论】：

标签： javascript angularjs svg

【解决方案1】：

根据https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRectgetBoundingClientRect 返回四个值：top、left、bottom、right。在您的控制台中，您可以看到存在这四个值。从这些值计算宽度和高度很简单

你使用：

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

它返回一个 DOMRect 然后稍后：

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

正如我所说，viewportOffset 是一个 DOMRect，它没有属性宽度和高度。相反他们有右下角。

所以要计算出你的宽度和高度，你的返回码应该是这样的：

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

【讨论】：

但viewportOffset.bottom - viewportOffset.top 仍会将height 设为0。