在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
