时间戳

首页 > 解决方案 > SVG 和 HTML：getBBox 和 getBoundingClientRect 与将鼠标悬停在检查器中的节点上时不同

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

问题描述

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

当我选择这个标签并调用getBBox()或者getBoundingClientRect()由于某种原因我得到剪切路径的矩形 - 而不是溢出的尺寸。

这很奇怪，原因有两个：

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

那么正确的行为是什么？以及如何获得带有剪辑路径隐藏元素的 svg 元素的全宽？

在此处输入图像描述

标签： javascripthtmlsvg

解决方案

SVG 1.1 规范和CSS 屏蔽规范都说明了这一点：

剪切路径会影响元素的呈现。它不会影响元素的固有几何形状。被剪裁的元素（即<clipPath>通过clip-path属性引用元素的元素，或引用元素的子元素）的几何形状必须保持与未被剪裁时相同。r

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

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

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

推荐阅读