Javascript getBoundingClientRect()不';t返回SVG矩形的高度和宽度
我需要一双新鲜的眼睛来告诉我我做错了什么 我想得到Javascript getBoundingClientRect()不';t返回SVG矩形的高度和宽度,javascript,angularjs,svg,Javascript,Angularjs,Svg,我需要一双新鲜的眼睛来告诉我我做错了什么 我想得到高度和宽度并用它们计算出另一个元素的位置 HTML <g> <rect class="graphic" draggable="data" ng-attr-x="{{ data.x }}" ng-attr-y="{{ data.y }}" ng-attr-height="{{ data.height }}" ng-attr-wi
高度
和宽度
并用它们计算出另一个元素的位置
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>
我如何使用该功能
var svgElement = getSVGRectDimensions(data.element);
在控制台中,我得到了
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
}
}
从日志中,您可以看到rect
>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>
为什么会这样
我还试图去掉firstElementChild
,这导致返回g
而不是rect
,但仍然height
和width
=0。根据getBoundingClientRect返回四个值:top、left、bottom、right。
firstChild.Clientrect ClientRect {} bottom: 60.999996185302734 height: 0 left: 681.1538696289062 right: 681.1538696289062 top: 60.999996185302734 width: 0 __proto__: ClientRect
在控制台中,您可以看到这四个值存在。从这些值计算宽度和高度非常简单
您使用:
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
}
但是viewportOffset.bottom
-viewportOffset.top
仍将高度
设为0。