[英]getBoundingClientRect() doesn't return height and width of SVG rect
I need a pair of fresh eyes to show me what I am doing wrong. 我需要一双新鲜的眼睛来告诉我我做错了什么。
I want to get height
and width
and use them to work out the position of another element. 我想获得
height
和width
并使用它们来计算出另一个元素的位置。
HTML 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 for returning values I want 返回我想要的值的函数
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
}
}
How I use the function 我如何使用该功能
var svgElement = getSVGRectDimensions(data.element);
In the console I get 在控制台我得到
From the logs, you can see that height
and width
of rect
> 0. 从日志中,您可以看到
rect
height
和width
> 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>
And yet, when I call the function with getBoundingClientRect()
, height
and width
= 0. 然而,当我用
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
Why is that happening? 为什么会这样?
I also tried to get rid of firstElementChild
, which results in returning g
instead of rect
but still height
and width
= 0. 我也试图摆脱
firstElementChild
,这导致返回g
而不是rect
但仍然height
和width
= 0。
According to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect returns four values: top, left, bottom, right. 根据https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect,getBoundingClientRect返回四个值:top,left,bottom,right。 In your console you can see that these four values are present.
在控制台中,您可以看到存在这四个值。 Calculating the width and height from these values is trivial
从这些值计算宽度和高度是微不足道的
you use: 你用:
var viewportOffset = element[0].firstElementChild.getBoundingClientRect();
which returns a DOMRect and then later: 返回DOMRect,然后返回:
return {
left: viewportOffset.left,
height: viewportOffset.height,
top: viewportOffset.top,
width: viewportOffset.width
}
as I said, viewportOffset is a DOMRect which does not have properties width and height . 正如我所说,viewportOffset是一个DOMRect, 它没有属性width和height 。 Instead they have right, bottom .
相反,他们有正确的,最低的 。
so to work out your width and height, your return code should look like this: 所以要计算你的宽度和高度,你的返回代码应如下所示:
return {
left: viewportOffset.left,
height: viewportOffset.bottom - viewportOffset.top,
top: viewportOffset.top,
width: viewportOffset.right - viewportOffset.left
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.