SVG的标签怎么嵌入HTML内容

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

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

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

例如：

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

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

• 不能只写 ，要写
• 里面的子元素（p、span、input 等）不用重复写 xmlns，继承父级即可

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

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

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

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

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

• IE 不支持 （已淘汰，但若需兼容旧项目需注意）
• 在 Canvas 或 WebGL 场景中，它比 SVG 原生渲染更重，性能略低
• 服务端渲染或静态导出（如转 PNG）时， 内容常丢失，需额外处理
基本上就这些。用对了很灵活，用错了就啥也不显示——关键是 x/y/width/height + xmlns，缺一不可。