SVG＆amp; HTML：getBBox和getBoundingClientRect与将鼠标悬停在检查器中的节点上时不同

Question

所以我在svg元素中有一个<g>标记，其中clip-path由{x:0,y:0,width:1000,height;800}定义的矩形组成。我添加了剪切路径，因为我想隐藏这个标签的一些溢出的孩子。

当我选择此标记并因某种原因调用getBBox()或getBoundingClientRect()时，我会得到剪切路径的矩形 - 而不是溢出的尺寸。

这很奇怪有两个原因：

1. 鼠标悬停在浏览器检查器（mozilla和chrome）中的元素上，显示正确的尺寸（width:1200, height:800）。
2. 在类似结构的文档中，这些方法返回带溢出的维度。

那么正确的行为是什么？以及如何使用剪辑路径隐藏元素获取svg元素的整个宽度？

Answer 1

SVG 1.1 spec和CSS masking spec都说明了这一点：

  

剪切路径会影响元素的渲染。它不会影响元素的固有几何形状。剪切元素的几何（即通过<clipPath>属性引用clip-path元素的元素，或引用元素的子元素）必须保持不变，就像它没有被剪切一样.r

以下示例中会发生这种情况。所以这可能不是你的结果。

请注意.getBBox()和.getBoundingClientRect()的结果不同。这是因为本地用户空间坐标系中的第一个状态大小，而后者表示屏幕像素中的大小。在两者之间进行转换可能并不明显，因为它可能隐含在viewBox，width和height <svg>属性之间的关系中。 } element。

＆＃13;

＆＃13;

const clipped = document.querySelector('#clipped');
const bbox = clipped.getBBox();
console.log(bbox.x, bbox.y, bbox.width, bbox.height);
const bcrect = clipped.getBoundingClientRect();
console.log(bcrect.x, bcrect.y, bcrect.width, bcrect.height);

＆＃13;

<svg width="400" height="300" viewBox="0 0 200 200">
  <clipPath id="cp">
    <rect x="50" y="50" width="100" height="100" />
  </clipPath>
  <rect id="clipped" width="200" height="200" clip-path="url(#cp)" />
</svg>

＆＃13;

＆＃13;

＆＃13;