在svg中嵌入html内容并使其自适应高度
在使用SVG的foreignObject元素嵌入HTML内容时，常常会遇到一个问题：如何使foreignObject的高度根据内部HTML内容的高度自动调整？ 如果HTML内容的高度不确定，直接设置foreignObject的height属性往往无法达到预期效果，因为浏览器在渲染时需要知道foreignObject的尺寸才能正确渲染内部HTML。本文将详细讲解如何解决这个问题。
核心问题在于foreignObject元素需要预先设定高度和宽度才能正确渲染其内部的HTML内容。然而，当内部HTML内容的高度不确定时，如何动态调整foreignObject的高度就成为关键。
解决方法是利用JavaScript动态获取内部HTML内容的高度，然后将此高度设置为foreignObject的height属性。 以下代码示例演示了这一过程：
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> <foreignObject id="foreign-object" width="100%" height="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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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内容完全加载后才执行。 代码获取content div的高度(offsetHeight)，并将其设置为foreignObject的height属性。 这样，foreignObject的高度就能根据内部HTML内容的高度动态调整了。 需要注意的是，xmlns=”http://www.w3.org/1999/xhtml” 属性在
标签中是必要的，用于指定内部HTML的命名空间。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
