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内容的高度变化。
以上就是SVG foreignObject高度如何根据内部HTML内容动态调整？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
572
收藏
