SVG和MathML必须区分命名空间，因浏览器将它们视为“命名空间切换点”，遇svg/math标签即切换至对应XML命名空间；不区分会导致circle被当未知HTML丢弃、mi渲染空白、appendChild报DOMException错误。
SVG 和 MathML 在 HTML 中为何必须区分命名空间
浏览器解析 HTML 文档时，默认所有标签都在 http://www.w3.org/1999/xhtml 命名空间下；但 svg 和 math 标签是“命名空间切换点”——一旦遇到它们，解析器会自动切换到对应 XML 命名空间，并影响其子节点的创建方式。不区分会导致：circle 被当成未知 HTML 标签丢弃、mi 渲染为空白、appendChild 报 DOMException 错误。
预览环境里如何确保 SVG/MathML 不被降级为 HTML 元素
关键不是加 xmlns 属性，而是让渲染器识别根节点语义。在 Vue 或 React 等框架的预览环境中（如 Storybook、Vite 预览页），常见错误是直接用字符串模板拼接 SVG/MathML 片段，导致 VNode 未携带 ns 字段：
- 用
<svg>开头的组件，Vue 会自动设ns = 'http://www.w3.org/2000/svg'，子节点继承；但若用<component :is="tag">动态渲染'circle'，必须手动传namespace: 'http://www.w3.org/2000/svg' - MathML 必须以
<math xmlns="http://www.w3.org/1998/Math/MathML">显式开头——即使 HTML5 允许省略，预览服务端（如 Vite SSR）或 hydration 阶段仍可能因无xmlns导致命名空间丢失 - 避免在
<svg>内直接写<div>：不包裹<foreignObject>时，div会被强制按 SVG 命名空间创建，失败后静默忽略
混合渲染时 ID 冲突与样式隔离怎么破
SVG 的 id 是文档全局唯一的，MathML 的 id 同理。预览环境常并行加载多个 demo 组件，极易触发资源复用问题：
- 两个独立
<svg>块都定义了<pattern id="bg">，第二个将引用第一个的定义——解决办法是生成带哈希前缀的 ID，例如id="bg-abc123"，并在fill="url(#bg-abc123)"中同步更新 - CSS 选择器如
svg circle会跨命名空间生效，但math mi不会响应同一规则；若需统一控制，改用 class + 局部作用域（如:deep(.math-inline circle)）更可靠 - MathML 默认不继承父级 font-size，需显式设
font-size: 1em或用style="font-size: inherit"
为什么本地预览能跑，部署后 MathML 就空白
本质是 MIME 类型和解析上下文切换。本地 index.html 由浏览器按 text/html 解析，宽容处理；但某些预览服务（如 GitHub Pages 的静态托管、CI 构建产物）若误配为 application/xhtml+xml，就会强制要求所有命名空间显式声明，且大小写敏感。
立即学习“前端免费学习笔记（深入）”；
验证方法：打开浏览器开发者工具 → Network → 查看响应头中的 Content-Type。若含 xhtml，必须确保：
-
<math>标签带完整xmlns，且不能省略闭合斜杠（</math>不合法，需<math></math>） - 所有属性值用双引号包裹，
<mi x="1">合法，<mi x=1>在 XHTML 下报错 - 避免自闭合 SVG 标签写法如
<circle/>，应写成<circle></circle>
最易被忽略的是：MathML 在 Safari 中对 <annotation-xml> 零容忍，哪怕只多一个空格也会整块失效，而 Chrome/Firefox 可能照常渲染——预览时务必三端并行验证。
