在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內容的高度動態調整。 需要注意的是，內部
元素中的xmlns=”http://www.w3.org/1999/xhtml”屬性必不可少，以確保正確解析HTML內容。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
