JavaScript 能否在 SVG 中插入 HTML div 元素？

替代方案

1. 使用 <foreignObject>：SVG 1.2+ 支援嵌入 HTML 內容。
   

   <svg width="300" height="200">
     <foreignObject x="10" y="10" width="100" height="100">
       <div xmlns="https://www.w3.org/1999/xhtml" style="color:red;">HTML 內容</div>
     </foreignObject>
   </svg>
   

   限制：IE/Edge 早期版本不支援，行動裝置效能較差。
2. 改用 SVG 原生元素繪製：地圖、圖形直接用 <path>、<polygon>、<text> 等，效能最佳。
3. 疊加 HTML 層：在 SVG 上方絕對定位一個 <div> 容器，用 CSS 定位對齊，邏輯分離更清晰。

建議

若為地圖列印模板，建議**純 SVG 繪圖**或 **SVG + 絕對定位 HTML 覆蓋層**，避免 foreignObject 相容性問題。