JavaScript 查询嵌套 SVG 元素的关键是确认文档上下文：内联 SVG 用 document.querySelector， 实例用 useElement.instanceRoot.querySelector，iframe 用 contentDocument，Shadow DOM 用 shadowRoot.querySelector，跨命名空间需 getElementsByTagNameNS 或带前缀的选择器。
在 JavaScript 中查询嵌套命名空间（比如 SVG 嵌在 HTML 中，又包含自定义 XML 命名空间、或通过 <use></use> 引用外部符号）里的 SVG 元素，关键不是“用什么方法”，而是理解命名空间上下文和作用域限制。直接用 document.querySelector 往往查不到，因为 SVG 元素可能不在主文档的默认 HTML 上下文中，尤其涉及 <svg></svg> 内嵌、<foreignobject></foreignobject>、<use></use> 实例化、或 Shadow DOM 时。
确认 SVG 所在的文档上下文
SVG 元素不一定属于 document。常见情况包括：
- 内联 SVG：在 HTML 文档中直接写的
<svg></svg>，属于主文档，可用document.querySelector('svg path') -
<use></use>引用的元素：实际渲染的是影子树中的克隆节点，原<defs></defs>或外部文件中的元素不可直接通过主 document 查询 - iframe 或 object 加载的 SVG：需先获取其
contentDocument，再在其内部查询 - Web Components 中的 Shadow DOM：必须调用
shadowRoot.querySelector()，不能跨边界访问
处理
<use href="#my-icon"></use> 渲染出的图形是“实例”，但 DOM 中不直接暴露其结构（早期浏览器甚至完全不可访问）。现代浏览器（Chrome 88+、Firefox 73+、Safari 15.4+）支持 useElement.instanceRoot：
const useEl = document.querySelector('use');
if (useEl.instanceRoot) {
const pathInUse = useEl.instanceRoot.querySelector('path'); // ✅ 查到克隆后的 path
}
注意：instanceRoot 是只读的 DocumentFragment，不能用 querySelectorAll 跨多个 <use></use> 批量查；每个 <use></use> 需单独处理。
立即学习“Java免费学习笔记（深入）”；
跨命名空间查询（如带 xmlns 的自定义 SVG 扩展）
如果 SVG 内部混用了其他命名空间（例如 inkscape:、xlink: 或自定义前缀），querySelector 默认忽略命名空间——它只认标签名和属性名，不校验 namespaceURI。
真正需要按命名空间匹配时，得用 getElementsByTagNameNS 或 querySelector 配合带命名空间前缀的属性选择器（仅限属性）：
- 查
<rect></rect>（实际是http://www.w3.org/2000/svg下的 rect）：直接写'rect'即可，浏览器自动识别 - 查
<grid></grid>：需用svgEl.getElementsByTagNameNS('http://www.inkscape.org/namespaces/inkscape', 'grid') - 查
xlink:href属性：querySelector('[xlink\:href]')（注意 CSS 中冒号要转义）
安全遍历 Shadow DOM 和 iframe 中的 SVG
避免“查不到就报错”，应主动检测上下文：
// 查 iframe 内的 SVG
const iframe = document.querySelector('iframe[src$=".svg"]');
if (iframe.contentDocument) {
const svgInIframe = iframe.contentDocument.querySelector('svg');
}
// 查 Shadow DOM 中的 SVG（假设 host 是 custom-icon）
const host = document.querySelector('custom-icon');
if (host.shadowRoot) {
const innerSvg = host.shadowRoot.querySelector('svg');
}
对动态生成的 Shadow DOM 或延迟加载的 iframe，建议配合 MutationObserver 或 load 事件监听后再查询。
不复杂但容易忽略：多数“查不到 SVG 元素”的问题，根源是没确认目标元素当前所处的文档片段（document / shadowRoot / contentDocument / instanceRoot），而不是选择器写错了。
