foreignobject内容不显示的根本原因是其默认宽高为0，必须显式设置width和height属性，且子元素需声明xmlns="http://www.w3.org/1999/xhtml"命名空间，否则浏览器将其视为未定义svg元素而忽略。

不设 width 和 height，foreignObject 内容一定不显示——这是最常踩的坑，且所有主流浏览器都一样。

为什么 foreignObject 里写了 HTML 却完全看不见

根本原因就一个：它默认宽高为 0，SVG 渲染器不会根据子内容自动撑开。和 HTML 的块级元素完全不同。

• width 和 height 必须显式写，单位可以是 px、em 或无单位数值（如 200），但不能写 auto、100% 或留空
• x/y 定位的是 foreignObject 自身左上角，不是内部 <div> 的偏移；如果设了 <code>y="10" 但 height="20"，内容可能被裁掉下半部分
• 没加 xmlns="http://www.w3.org/1999/xhtml" 在子容器（如 <div>）上，浏览器会把 <code><p></p>、<button></button> 当作未定义的 SVG 元素直接忽略

  foreignObject 里怎么写 HTML 才能正常渲染和交互

  它只接受 XHTML 命名空间下的合法 HTML，且样式与行为受 SVG 上下文限制。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 必须用 <div xmlns="http://www.w3.org/1999/xhtml"> 包裹全部 HTML 内容，不能直接放 <code><p></p>
  • 内联样式优先：外部 CSS 文件不生效；<style></style> 标签可用，但作用域仅限于该 foreignObject 内部
  • 支持 <button></button>、<input>，但 position: fixed、z-index 无效；transform 可能被父级 SVG 缩放干扰
  • 事件只在 foreignObject 子树内冒泡，想通知外部 JS 需手动委托或触发自定义事件

  Safari 和移动端 WebView 的兼容性雷区

  静态文本基本没问题，但稍复杂的功能在 Safari（尤其旧版）和部分 Android WebView 中容易静默失败。

  • Safari 15.4+ 才完整支持 <canvas></canvas> 和 <iframe></iframe> 嵌入；更早版本会直接跳过这些标签，不报错也不渲染
  • <input> 在 Safari 移动端唤起软键盘不稳定，光标定位可能错位；Chrome/Firefox 表现一致
  • 若父 <svg></svg> 上用了 contain: paint 或某些 CSS 属性，Safari 可能触发渲染 bug，导致内容闪退或错位
  • 坐标对齐差异真实存在：Chrome 里 y 对应 <div> 顶部，Safari 有时按文字 baseline 计算，像素级偏移需单独调试 <h3>什么情况下该用 <code>foreignObject，什么情况不该用

    它不是 <text></text> 的替代品，而是为特定需求保留的“重武器”。

    • 适合：需要富文本排版（带链接、<strong></strong>、换行）、表单控件（<select></select>）、动态更新的 HTML tooltip、或已有 React/Vue 组件需挂载到 SVG 图形某区域
    • 不该用：纯文字标签、简单图标说明、需要 SEO 可读性的图表文字——这些用 <text></text> 更轻量、更稳、缩放无锯齿
    • 别试图给 foreignObject 加 transform 动画，多数浏览器不支持或严重错位；要动效，改用 <g></g> 包裹后做 SVG 级变换

    真正难调的从来不是语法，而是跨浏览器的像素级对齐和事件穿透逻辑——比如 Chrome 里点击按钮能 console.log，Safari 里却没响应，大概率是命名空间漏了或事件监听位置错了。