如何将 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 在调整元素大小时触发，例如，通过调整 window 的大小。 由于两个信息标签的更改，这将是可见的。 然而，对我来说（Mozilla Firefox 84.0），只有 DIV 元素的信息 label 发生了变化。

作为一种解决方法，我可以考虑用 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>