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