SVG中foreignObject高度动态调整以适应内部HTML内容
在SVG图形中嵌入HTML内容，可以使用foreignObject元素。然而，foreignObject需要预设高度和宽度才能正确渲染内部HTML。如果HTML内容高度不确定（例如，动态文本或段落数量变化），则需要动态调整foreignObject的高度。
直接设置height: auto无效，需要借助JavaScript。 解决方案是获取内部HTML内容的高度，然后用JavaScript动态设置foreignObject的高度。
以下代码演示如何实现：
立即学习“前端免费学习笔记（深入）”；
代码首先获取包含实际内容的div元素(content)的高度(offsetHeight)。然后，使用setAttribute方法将此高度值赋予foreignObject元素。window.addEventListener("load", ...)确保在页面完全加载后执行代码，保证正确获取content元素的高度。 这样，foreignObject的高度就能动态适应内部HTML内容的高度变化。
