在SVG中嵌入HTML并实现高度自适应
SVG的foreignObject元素允许在SVG图形中嵌入HTML内容。然而，当嵌入的HTML内容高度不确定时，如何让foreignObject元素的高度自动适应内部HTML内容的高度，是一个常见难题。本文提供一种有效的解决方案。
问题在于foreignObject元素需要预先设置高度和宽度才能正确渲染内部HTML内容，而内部HTML内容的高度是动态的，无法预先确定foreignObject的高度。
解决方案的关键在于使用JavaScript动态获取内部HTML内容的高度，然后将此高度应用于foreignObject元素。以下代码演示了如何实现：
立即学习“前端免费学习笔记（深入）”；
PHP5 和 MySQL 圣经
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
466 查看详情
window.addEventListener("load", () => { const content = document.getElementById("content"); const foreignObject = document.getElementById("foreign-object"); const contentHeight = content.offsetHeight; foreignObject.setAttribute("height", contentHeight);});这是一个段落，高度不确定。
这是另一个段落，可能会影响整体高度。
这段代码在SVG中定义了一个foreignObject元素，包含一个带有文本内容的div元素。JavaScript代码片段监听window.load事件，确保HTML内容完全加载后再调整高度。代码获取内部div元素（content）的高度，并将其设置为foreignObject元素的高度。这样，foreignObject的高度就能根据内部HTML内容的高度动态调整。 需要注意的是，内部
xmlns="http://www.w3.org/1999/xhtml"属性必不可少，以确保正确解析HTML内容。
以上就是SVG中嵌入HTML如何实现高度自适应？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1118026.html
微信扫一扫
支付宝扫一扫
