SVGforeignObject高度如何动态适应内部HTML内容？

SVG中`foreignObject`元素嵌入HTML后，如何动态调整其高度以适应内部内容变化是一个常见问题。直接设置`height: auto`无效，需要借助JavaScript获取内部HTML内容的高度，再动态设置`foreignObject`元素的高度属性。本文将提供完整的代码示例，通过获取包含HTML内容的div元素的高度，并用`setAttribute`方法将其赋予`foreignObject`，实现`foreignObject`高度的动态调整，确保SVG图形能够完美适应内部HTML内容的动态变化。 此方法有效解决了`foreignObject`高度预设导致的渲染问题，尤其适用于包含动态文本或段落数量变化的情况。

SVG中foreignObject高度动态调整以适应内部HTML内容

在SVG图形中嵌入HTML内容，可以使用foreignObject元素。然而，foreignObject需要预设高度和宽度才能正确渲染内部HTML。如果HTML内容高度不确定（例如，动态文本或段落数量变化），则需要动态调整foreignObject的高度。

直接设置height: auto无效，需要借助JavaScript。 解决方案是获取内部HTML内容的高度，然后用JavaScript动态设置foreignObject的高度。

以下代码演示如何实现：

<svg height="500" width="500" xmlns="http://www.w3.org/2000/svg"><foreignobject height="100" id="foreign-object" width="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><script>
window.addEventListener("load", () => {
  const content = document.getElementById("content");
  const foreignObject = document.getElementById("foreign-object");
  const contentHeight = content.offsetHeight;
  foreignObject.setAttribute("height", contentHeight);
});
</script>

代码首先获取包含实际内容的div元素(content)的高度(offsetHeight)。然后，使用setAttribute方法将此高度值赋予foreignObject元素。window.addEventListener("load", ...)确保在页面完全加载后执行代码，保证正确获取content元素的高度。 这样，foreignObject的高度就能动态适应内部HTML内容的高度变化。

好了，本文到此结束，带大家了解了《SVGforeignObject高度如何动态适应内部HTML内容？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！