Javascript SVG&；HTML:getBBox和getBoundingClientRect与将鼠标悬停在inspector中的节点上时不同

因此，我在svg元素中有一个

标记，该标记具有

剪辑路径

，该路径由

{x:0，y:0，width:1000，height；800}

定义的矩形组成。我添加了剪切路径，因为我想隐藏这个标记的一些溢出子项

当我选择此标记并出于某种原因调用

getBBox（）

或

getBoundingClientRect（）

时，我得到的是剪切路径的矩形，而不是溢出的尺寸

这很奇怪，原因有二：

将鼠标放在浏览器检查器（mozilla和chrome）中的元素上，显示正确的尺寸（

宽度：1200，高度：800

）

在结构类似的文档中，这些方法返回带有溢出的维度

那么什么是正确的行为呢？如何获得包含clip-path隐藏元素的svg元素的全宽

和该状态：

剪裁路径会影响元素的渲染。它不会影响图元的固有几何图形。剪裁元素（即通过

剪裁路径

属性引用

元素的元素，或引用元素的子元素）的几何图形必须保持与未剪裁元素相同。r

下面的例子就是这样的。所以这可能不是你的结果

请注意，

.getBBox（）

和

.getBoundingClientRect（）

的结果不同。这是因为第一个状态以本地用户空间坐标系表示大小，而后一个状态以屏幕像素表示大小。这两个元素之间的转换可能并不明显，因为它可能隐式隐藏在

元素的

视图框

、

宽度

和

高度

属性之间的关系中

constclipped=document.querySelector（'#clipped'）；
const bbox=clipped.getBBox（）；
控制台日志（bbox.x，bbox.y，bbox.width，bbox.height）；
const bcrect=clipped.getBoundingClientRect（）；
日志（bcrect.x、bcrect.y、bcrect.width、bcrect.height）

和状态：

剪裁路径会影响元素的渲染。它不会影响图元的固有几何图形。剪裁元素（即通过
剪裁路径
属性引用
元素的元素，或引用元素的子元素）的几何图形必须保持与未剪裁元素相同。r

下面的例子就是这样的。所以这可能不是你的结果

请注意，
.getBBox（）
和
.getBoundingClientRect（）
的结果不同。这是因为第一个状态以本地用户空间坐标系表示大小，而后一个状态以屏幕像素表示大小。这两个元素之间的转换可能并不明显，因为它可能隐式隐藏在
元素的
视图框
、
宽度
和
高度
属性之间的关系中


constclipped=document.querySelector（'#clipped'）；
const bbox=clipped.getBBox（）；
控制台日志（bbox.x，bbox.y，bbox.width，bbox.height）；
const bcrect=clipped.getBoundingClientRect（）；
日志（bcrect.x、bcrect.y、bcrect.width、bcrect.height）

我很欣赏这个答案，我也知道BBox和BoundingClientRect之间的区别，但我的问题是BBox和BoundingClientRect都返回了一个太小的宽度……更令人印象深刻的是，如果我现在选择了一个在这个剪切路径中包含对象的矩形，而不是一个宽度太小的矩形，我得到了一个宽度为0的矩形。这个提琴的结构与我使用的相同，显示了BBox和BoundingClientRect应该可以工作，但它不工作。我不熟悉d3sm，但我非常确定，现在您只需在图表尚未填充时记录大小。可能是绘制条形图的
.valueExtractor（）
函数异步执行回调？这也解释了组的0结果：rect尚未在内部。你可以通过两种方式进行测试：1。加载完页面后，直接从控制台执行
.getBBox（）
，您将得到正确的结果。2.尝试直接选择
，而不是脚本中的封闭组。我想您会发现选择是空的。我将假设
.transition（）
是来自d3.js的函数。这将设置计时器，即使持续时间随后设置为0。在转换开始时，请求一个用于在中运行转换的帧（请参阅，最终调用）。
.requestAnimationFrame（）
是异步的。只有在运行回调时，转换才会得出结论，即已到达结束时间，设置结束值并停止动画。我很欣赏答案，我知道BBox和BoundingClientRect之间的区别，但我的问题是BBox和BoundingClientRect返回的宽度都太小……更令人印象深刻的是，如果我选择了一个在该剪裁路径中包含对象的，现在-我没有得到一个宽度太小的矩形，而是得到了一个宽度为0的矩形。这把小提琴的结构与我使用的相同，显示了BBox和BoundingClientRect应该可以工作，但是在它不工作的情况下，我不熟悉d3sm，但我很确定，现在您只需在图表尚未填充时记录大小。可能是绘制条形图的
.valueExtractor（）
函数异步执行回调？这也解释了组的0结果：rect尚未在内部。你可以通过两种方式进行测试：1。页面加载完成后，直接从控制台执行
.getBBox（）
，然后