如何将ResizeObserver应用于SVG元素

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>

我希望两个ResizeObserver在调整元素大小时都会触发，例如，通过调整窗口大小。由于两个信息标签的更改，这将是可见的。然而，对我来说(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>