foreignObject是SVG中嵌入HTML内容的标签，需显式设置x、y、width、height，并在子元素上声明xmlns="http://www.w3.org/1999/xhtml"，否则内容不可见或解析失败。

是 SVG 中用于嵌入非 SVG 内容（比如 HTML 元素）的标签，但它有明确的使用前提和限制，不能直接写成 ``（注意大小写和拼写），正确写法是 ``。 下面说清楚怎么用、要注意什么、常见问题怎么解：

必须放在 SVG 坐标系内，且需指定宽高和位置

本身不自动撑开尺寸，必须显式设置 x、y、width、height 属性，否则内容不可见或渲染异常。

• x/y：定义左上角在 SVG 坐标系中的位置（不是 CSS 的相对定位）
• width/height：决定能显示多少 HTML 内容，超出部分会被裁剪（类似 overflow: hidden）

例如：

<svg width="300" height="200">
<foreignObject x="20" y="30" width="200" height="100">
<div xmlns="http://www.w3.org/1999/xhtml">
<p style="margin:0; color:red;">这是嵌入的 HTML</p>
</div>
</foreignObject>
</svg>

内部 HTML 必须声明 XHTML 命名空间

SVG 是 XML 格式，嵌入的 HTML 需要明确告知解析器这是 XHTML 内容，所以 子元素（如 div）必须带 xmlns="http://www.w3.org/1999/xhtml"。漏掉这个，浏览器可能忽略整个内容或报解析错误。

Wechat HTML Publisher

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

下载

• 不能只写 <div>，要写 <div xmlns="http://www.w3.org/1999/xhtml">
• 里面的子元素（p、span、input 等）不用重复写 xmlns，继承父级即可

支持的 HTML 有限，样式和交互有约束

不是所有 HTML 都能正常工作。常见限制包括：

立即学习“前端免费学习笔记（深入）”；

• 表单控件（如 <input>、<textarea>）多数浏览器支持，但 focus、键盘事件可能不稳定
• CSS 尽量用内联样式或 <style> 块，外部样式表或 class 引用容易失效
• 绝对定位、flex、grid 多数可用，但需注意 SVG 容器是否设了 overflow: visible（默认是 hidden）
• JavaScript 绑定事件可以，但需确保 DOM 加载完成后再操作（foreignObject 内部节点属于 SVG 子树）

替代方案要考虑兼容性和维护性

如果只是想叠加文字或简单 UI，优先考虑原生 SVG 元素（如 <text>、<tspan>）。只有当需要复杂布局、富文本、可编辑内容或第三方组件时，才用 。

• IE 不支持 （已淘汰，但若需兼容旧项目需注意）
• 在 Canvas 或 WebGL 场景中，它比 SVG 原生渲染更重，性能略低
• 服务端渲染或静态导出（如转 PNG）时， 内容常丢失，需额外处理

基本上就这些。用对了很灵活，用错了就啥也不显示——关键是 x/y/width/height + xmlns，缺一不可。