渲染器依据上下文严格继承XML命名空间，不自动转换：SVG/MathML根节点触发对应URI命名空间，子节点默认继承；HTML元素需用<foreignObject>隔离；动态组件须显式指定namespace；SSR需确保顶层<svg>包裹以维持hydration一致性。
渲染器不会“自动转换”命名空间，而是依据上下文严格继承并应用 XML 命名空间——它不修改标签语义，只决定用哪种 DOM 创建方式（createElement 还是 createElementNS）来生成真实节点。
SVG 根节点触发命名空间上下文
当渲染器遇到顶层 <svg> 或 <math> 元素时，会将其 ns（namespace）字段设为对应 URI：
-
svg→"http://www.w3.org/2000/svg" -
math→"http://www.w3.org/1998/Math/MathML"
后续所有子节点（如 <circle>、<path>、<mrow>）默认继承该 ns，无需重复声明。浏览器据此调用 createElementNS(uri, tag)，确保元素被识别为 SVG/MathML 类型，而非 HTML。
HTML 元素在 SVG 中需显式隔离
HTML 标签（如 <div>、<p>）不能直接写在 <svg> 内部——渲染器不会把它“转成” SVG 元素，也不会静默忽略，而是尝试用 SVG 命名空间创建，导致失败或降级为无样式文本节点。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
<foreignObject>包裹，并在其内部恢复 HTML 命名空间 -
<foreignObject>自身属于 SVG 命名空间，但其子树会被渲染器识别为 HTML 上下文 - 例如：
<foreignObject><p>Hello</p></foreignObject>中的p是标准 HTML 元素，支持 CSS、事件、盒模型
动态渲染（如 <component :is="tag">）不自动推导命名空间
模板中硬编码的 <svg><circle></circle></svg> 可靠继承；但运行时拼出的标签名无法触发命名空间推导：
-
<component :is="'circle'">→ 渲染器按 HTML 命名空间处理，生成无效节点 - 必须配合
namespace选项（仅 render 函数或自定义指令支持） - 例如在 render 函数中：
h('circle', { namespace: 'http://www.w3.org/2000/svg' })
服务端与客户端命名空间一致性需主动保障
SSR 场景下，若组件未在顶层包裹 <svg>，子组件 VNode 的 ns 字段可能为空，导致客户端 hydration 时命名空间丢失：
- Vue 3 不会跨组件传递命名空间，只从父 VNode 继承
- 建议 SVG 相关逻辑封装为独立组件，且以
<svg>为根 - 避免在非 SVG 容器中条件渲染 SVG 子元素（如
v-if在<div>内）
