在SVG中嵌入HTML并实现高度自适应
SVG的foreignObject元素允许在SVG图形中嵌入HTML内容。然而，当嵌入的HTML内容高度不确定时，如何让foreignObject元素的高度自动适应内部HTML内容的高度，是一个常见难题。本文提供一种有效的解决方案。
问题在于foreignObject元素需要预先设置高度和宽度才能正确渲染内部HTML内容，而内部HTML内容的高度是动态的，无法预先确定foreignObject的高度。
解决方案的关键在于使用JavaScript动态获取内部HTML内容的高度，然后将此高度应用于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>这段代码在SVG中定义了一个foreignObject元素，包含一个带有文本内容的div元素。JavaScript代码片段监听window.load事件，确保HTML内容完全加载后再调整高度。代码获取内部div元素（content）的高度，并将其设置为foreignObject元素的高度。这样，foreignObject的高度就能根据内部HTML内容的高度动态调整。 需要注意的是，内部
以上就是SVG中嵌入HTML如何实现高度自适应？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
344
