getBoundingClientRect() 返回错误的宽度

Posted 2023-03-06

【中文标题】getBoundingClientRect() 返回错误的宽度

【英文标题】：getBoundingClientRect() returning wrong width

【发布时间】：2017-04-30 13:31:45

【问题描述】：

我将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   position>
          <rect x="0" y="0"   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...

编辑：作为证明：

【问题讨论】：

你在哪里检查 .width 的 .getBoundingClientRect() 对象？

@guest271314 在console.log(rect) 内...我想从技术上讲你可以做到console.log(rect.width)。

是element[0] div 元素吗？ console.log(window.innerWidth) 在console 登录什么？ “尽管宽度为618px，但返回300px” 哪个元素width 设置为618px？ “我的项目中没有自定义 CSS” 如何将元素 width 设置为 618px？

element[0] is the SVG and console.log(window.innerWidth)` 返回1920。当我检查 Chrome 开发工具并将鼠标悬停在 SVG 上时，它显示为 618px.. 内部 rect

svg 元素的width 在元素<svg height="100%" width="100%" position> 处设置为100%，而不是618px。 console.log(document.querySelector("svg").width.animVal.valueAsString, window.getComputedStyle(document.body).width).

【参考方案1】：

我弄清楚我的问题是什么。我应该使用 angulars $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)
            );
        
    ;
);