SVG中foreignObject高度自适应：如何让嵌入的HTML内容自动调整SVG元素高度？

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <foreignObject id="foreign-object" width="100%" height="100">
    <div id="inner-html" xmlns="http://www.w3.org/1999/xhtml">
      <div id="content" style="border: 1px solid black; padding: 10px;">
        <p>这是一个段落。高度是不确定的。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
        <p>这是另一个段落。这可能会影响总体高度。</p>
      </div>
    </div>
  </foreignObject>
</svg>

<script>
window.addEventListener("load", () => {
  const content = document.getElementById("content");
  const foreignObject = document.getElementById("foreign-object");

  const contentHeight = content.offsetHeight;

  foreignObject.setAttribute("height", contentHeight);
});
</script>