gpt4 book ai didi

javascript - getBoundingClientRect() 不返回 SVG 矩形的高度和宽度

转载 作者:搜寻专家 更新时间:2023-11-01 04:15:25 26 4
gpt4 key购买 nike

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

我想获取 heightwidth 并使用它们计算出另一个元素的位置。

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

在控制台中我得到

enter image description here

从日志中可以看到rectheightwidth > 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() 调用函数时,heightwidth = 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宽度 = 0。

最佳答案

根据 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect 返回四个值: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
}

关于javascript - getBoundingClientRect() 不返回 SVG 矩形的高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32628931/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com