在svg中嵌入html内容并使其自适应高度
在使用SVG的foreignObject元素嵌入HTML内容时，常常会遇到一个问题：如何使foreignObject的高度根据内部HTML内容的高度自动调整？ 如果HTML内容的高度不确定，直接设置foreignObject的height属性往往无法达到预期效果，因为浏览器在渲染时需要知道foreignObject的尺寸才能正确渲染内部HTML。本文将详细讲解如何解决这个问题。
核心问题在于foreignObject元素需要预先设定高度和宽度才能正确渲染其内部的HTML内容。然而，当内部HTML内容的高度不确定时，如何动态调整foreignObject的高度就成为关键。
解决方法是利用JavaScript动态获取内部HTML内容的高度，然后将此高度设置为foreignObject的height属性。 以下代码示例演示了这一过程：
这段代码首先定义了一个SVG元素和一个foreignObject元素，其中包含一个带有内容的div。 关键在于JavaScript代码段，它监听window.load事件，确保HTML内容完全加载后才执行。 代码获取content div的高度(offsetHeight)，并将其设置为foreignObject的height属性。 这样，foreignObject的高度就能根据内部HTML内容的高度动态调整了。 需要注意的是，xmlns="http://www.w3.org/1999/xhtml" 属性在
标签中是必要的，用于指定内部HTML的命名空间。
