DEBUG.WIKI
ZgoCloud:多地区部署,按需选节点;日本、美国、香港、德国
PanstarCloud:部署应用,接入 AI,云服务器与 AI 网关
OnlineSIM:在线接收短信,虚拟号码租用

Vue 异步 SVG 组件有 path 却不绘图:检查命名空间

Vue 3.5.43 中,Suspense 等待的异步组件可能把 SVG path 建成 HTML 元素。3.5.44 已修正;临时退出 Suspense 会改变原有等待语义。

SVG 的 path 节点已经出现在 DOM,坐标也正确,线条却完全不显示;同一组件改成同步加载就正常。若异步组件位于 Suspense 之下,应检查 path 的 namespaceURI,它可能被创建成了 HTML 元素。

Vue 3.5.43 存在这条具体组合:同步组件配合 Suspense 正常,异步组件不参与 Suspense 时也正常,异步组件由 Suspense 等待解析时却得到错误命名空间。正式 3.5.44 已包含按异步组件自身位置使用命名空间的修正。

看见 path 标签,不代表它是 SVGPathElement

正常 SVG 节点的命名空间是 http://www.w3.org/2000/svg;错误节点可能是 http://www.w3.org/1999/xhtml。标签名称相同,浏览器处理它们的方式仍不同,因此继续修改 stroke、坐标或层级,不一定能让错误类型的节点开始绘图。

旧异步解析路径向渲染过程传入了 Suspense 边界的命名空间,而不是组件实际挂载位置的命名空间。当边界位于普通 HTML 区域、异步子组件实际位于 SVG 内部时,这个差异就会显现。

沿实际失败的 SVG 元素检查 namespaceURI,同时保留同步和非 Suspense 异步两组对照。如果节点已是正确 SVG 命名空间,就应继续检查几何数据、样式、裁剪与可见区域,不能因为项目使用了异步组件就认定命中该缺陷。

保留等待语义时,更新对应运行时

项目支持时采用 Vue 3.5.44,并确认框架和应用真正使用了包含修正的依赖。不要只重写 SVG 标签上的 xmlns 来掩盖创建路径:节点已经按错误类型创建时,增加一个文本属性不等于重新创建正确命名空间的节点。

暂时不能更新时,可评估让这一个异步组件不参与 Suspense,例如在原来的 defineAsyncComponent 选项中设置 suspensible: false。这会改变父边界对它的等待和 fallback 行为,需要同时确认组件自身的加载、超时与错误状态,不能把这个选项批量加到所有异步组件上。

另一种局部选择是在原构建条件允许时改为同步导入该绘图组件,但会改变加载边界与首包内容。两条绕行都应由页面原有加载契约决定,不需要为一条边关闭全站 Suspense 或异步加载。

验收既要确认线条真正绘出,也要确认实际 path 使用 SVG 命名空间;再检查原来的加载等待、错误呈现与页面切换。仅把组件改成同步后画出来,只能说明绕开了触发组合,不能证明原异步运行时已经修复。