svg foreignObject 里面有不确定高度宽度的html 如何让foreignObject高度随内部html高度？

Question

因为需要给固定宽高才会渲染html
但是内部div高度不定 如何让html撑开foreignObject的高度

Answer 1

<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>这是另一个段落。这可能会影响总体高度。</p>
      </div>
    </div>
  </foreignObject>
</svg>


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

  const contentHeight = content.offsetHeight;

  foreignObject.setAttribute("height", contentHeight);
});