SVG & HTML: getBBox и getBoundingClientRect не такие, как при наведении курсора на узел в инспекторе

Question

Итак, у меня есть тег <g> в элементе svg с 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>.

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>