getBoundingClientRect（）返回错误的宽度

Question

我使用Angular Material作为我的网格系统。我试图生成一个SVG并且它应该向我显示元素的宽度，但是getBoundingClientRect()尽管宽度为300px，但它返回618px。我再次尝试使我的窗口变小但它仍然显示为300px，即使这次它实际上是100px ..

这是我的HTML：

<div layout="row" layout-wrap layout-padding>
    <div flex="33" ng-repeat="result in ctrl.results">
        <svg height="100%" width="100%" position>
          <rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
          <text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Hello World</text>
        </svg>
    </div>
</div>

这是我position属性的angularjs指令：

var app = angular.module('MainDirective', []);

app.directive('position', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            var rect = element[0].getBoundingClientRect();
            var text = element.children()[1].getBBox();
            console.log(rect)
        }
    };
});

我的项目中没有自定义CSS。

有什么想法可能会发生这种情况？我已经尝试了getBoundingClientRect()这么多不同的版本，但他们都返回300 ...

编辑：就像证明一样：

Answer 1

我弄清楚我的问题是什么..我应该使用角度$scope.$watch，因为我在点击事件时生成了svg。

var app = angular.module('MainDirective', []);

app.directive('position', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            var rect, image, text;
            $scope.$watch(element, function () {
                rect = element[0].clientWidth;
                image = element.children()[1].getBBox();
                text = element.children()[2].getBBox();
                console.log("Rect: "+rect+" image: "+image.width+" text: "+text.width)
            });
        }
    };
});

Answer 2

未明确调整大小的元素的宽度计算可能会非常奇怪：300px是浏览器“放弃”时报告的宽度。我在解读，但详细说明如下：

https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins