应优先使用 渲染纯文字；仅当需在 SVG 中嵌入富文本、表单、复杂排版或交互式 HTML 内容时才用 ，且必须显式设置宽高、坐标及 xmlns，注意 Safari 和 WebView 兼容性问题。
<foreignobject></foreignobject> 能在 SVG 里嵌入 HTML，但不是所有环境都支持，尤其注意 Safari 和部分移动端 WebView 的兼容性问题。
什么时候该用 <foreignobject></foreignobject>
适合需要在 SVG 图形上叠加富文本、表单控件、带样式的段落或动态更新的 HTML 内容（比如 tooltip、标签云、带链接的文字说明）。它不是用来替代 <text></text> 的——纯文字优先用 <text></text>，更轻量、更可控、渲染更稳。
- SVG 坐标系中需要定位一块 HTML 区域（例如：在某个圆右上方放一个带背景色的
<div>） <li>内容含内联样式、<code><img alt="SVG中的标签怎么用 嵌入HTML内容" >、<button></button>或需要 JS 交互 - 内容结构复杂，CSS 排版比 SVG 文本基线控制更方便
<foreignobject></foreignobject> 必须设置宽高和坐标
它不像 HTML 元素那样自动撑开，width 和 height 是强制属性，且必须是具体数值（不能是 100%），否则内容不渲染。它的 x、y 是 SVG 坐标系中的左上角位置，不是 CSS 的 top/left。
<svg width="400" height="300">
<circle cx="100" cy="100" r="40" fill="#eee"/>
<foreignObject x="150" y="70" width="180" height="60">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px; background:#fff; padding:4px; border:1px solid #ccc;">
<strong>提示</strong>：这是嵌入的 HTML
</div>
</foreignObject>
</svg>
-
xmlns="http://www.w3.org/1999/xhtml"必须显式声明，否则浏览器可能忽略内部 HTML - 内部 HTML 不能使用外部 CSS 文件，内联样式或
<style></style>可用，但要注意作用域限制 - 不要在
<foreignobject></foreignobject>外套<a></a>或试图给它加transform动画——多数情况下会失效或错位
常见错误：内容不显示或错位
最常遇到的是“写了但看不见”，基本就这三类原因：
立即学习“前端免费学习笔记（深入）”；
- 没设
width/height，或设为0、auto、100% -
x/y超出 SVGviewBox范围，且父容器没设overflow: visible（默认裁剪） - 嵌套了
<svg></svg>或其他 SVG 元素（<foreignobject></foreignobject>只接受 XHTML 内容，不认<circle></circle>等） - Safari 中若父 SVG 用了
contain或paint相关 CSS 属性，可能触发渲染 bug
真正难调的不是语法，而是坐标对齐和跨浏览器行为差异——比如 Chrome 里 y 对应 div 的顶部，Safari 有时会按 baseline 计算；HTML 内部字体行高、padding 在不同引擎下像素级偏移也常有。如果只是简单标注，老实用 <text></text> + <tspan></tspan> 更省心。
