Vue.js渲染器根据父节点命名空间自动推导子VNode命名空间，而非标签名；SVG/MathML元素需正确嵌套或显式指定，否则降级为HTML元素；手动创建VNode时应透传或显式设置namespace以确保SSR与hydration一致。
渲染器中的 namespace 自动推导，是指在构建虚拟节点（VNode）时，框架不靠标签名判断元素类型，而是根据父节点已有的命名空间（ns）自动赋予子元素对应命名空间。它不是“猜”，而是严格继承——父是 SVG，子默认就是 SVG；父是 HTML，子就是 HTML；父没声明或为 0，则子降级为 HTML 元素。
为什么需要自动推导？
混合文档（如 HTML 中嵌套 SVG 或 MathML）本质是多命名空间共存。浏览器靠 xmlns 属性识别语义：SVG 元素必须属于 http://www.w3.org/2000/svg 命名空间，否则会被当普通 HTML 标签处理，导致样式失效、事件丢失、甚至不渲染。自动推导让开发者无需每个子标签都手动写 xmlns，减少冗余，也避免遗漏。
哪些情况会破坏自动推导？
- SVG 元素被写在非 SVG 父容器中（比如直接放在
<div>里却没声明xmlns） - 使用动态创建 API（如
createElement或svelte:element）时未透传ns或xmlns - SSR 渲染与客户端 hydration 的命名空间不一致（服务端推导对了，客户端没继承或重置了）
- 模板中错误地重复声明
xmlns（如子<g>又写一遍），虽不报错但可能干扰解析逻辑
如何确保混合渲染不出错？
-
根 SVG 必须显式声明：
<svg xmlns="http://www.w3.org/2000/svg">—— 这是整个 SVG 子树的起点 -
手动创建 VNode 时透传 namespace：Vue 中用
createVNode('rect', { ns: SVG })；Svelte 中用<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"> -
跨框架/组件边界时检查作用域：比如 PrimeVue 菜单里插入 SVG 图标，需确认图标组件是否在 SVG 上下文中渲染，否则要包裹一层带
xmlns的<svg hidden>或改用内联<svg>写法 -
构建时启用命名空间校验：Svelte 开启
dev: true+namespace: 'svg'配置；Vue SSR 模板编译阶段可加自定义 lint 规则检测缺失ns
命名冲突不是名字重复那么简单，而是命名空间语义断裂。修复关键不在“改名”，而在“保上下文”——让每个元素知道自己属于哪个 XML 家族。做到这点，HTML、SVG、MathML 就能真正和平共处。
