如何将 ResizeObserver 应用于 SVG-Element？

Question

我喜欢对 HTML 文档中 SVG 元素的大小变化做出反应。经过一番研究，我发现 ResizeObserver API 旨在侦听有关给定 HTML 或 SVG 元素的此类更改（stackoverflow、MDN）。不幸的是，我无法让它适用于 SVG 元素。

我的示例包含一个 DIV 元素、一个 SVG 元素以及每个元素的 ResizeObserver：

const svg = document.querySelector('#svg')
const svgInfo = document.querySelector('#svg-info')
const div = document.querySelector('#div')
const divInfo = document.querySelector('#div-info')

const svgObserver = new ResizeObserver(() => {
  svgInfo.textContent = svg.clientWidth
})
svgObserver.observe(svg)
const divObserver = new ResizeObserver(() => {
  divInfo.textContent = div.clientWidth
})
divObserver.observe(div)

<svg id="svg" style="background-color: red; width: 100%; height: 50px"></svg>
<div id="svg-info">initial</div>
<div id="div" style="background-color: blue; width: 100%; height: 50px"></div>
<div id="div-info">initial</div>

我希望两个 ResizeObservers 在调整元素大小时触发，例如，通过调整窗口大小。由于两个信息标签的更改，这将是可见的。然而，对于我（Mozilla Firefox 84.0）来说，只有 DIV 元素的信息标签发生了变化。

作为一种解决方法，我可以考虑用 DIV 作为代理来包装我的 SVG。尽管如此，我仍然想知道为什么ResizeObserver和SVG的组合不起作用。

Answer 1

您必须将 SVG 包装在 DIV 元素内并观察包装的 DIV 元素，如下所示：

const svg = document.querySelector('#svg')
const svgInfo = document.querySelector('#svg-info')
const div = document.querySelector('#div')
const divInfo = document.querySelector('#div-info')

const svgObserver = new ResizeObserver(() => {
  svgInfo.textContent = svg.clientWidth
})
svgObserver.observe(svg)
const divObserver = new ResizeObserver(() => {
  divInfo.textContent = div.clientWidth
})
divObserver.observe(div)

<div id="svg" style="background-color: red; width: 100%; height: 50px">
    <svg style="width: 100%; height: 100%"></svg>
</div>
<div id="svg-info">initial</div>
<div id="div" style="background-color: blue; width: 100%; height: 50px"></div>
<div id="div-info">initial</div>