使用<object>标签加载SVG时访问其子元素出现异常行为的问询

正常预期表现说明 #

通过<object>标签嵌入的SVG属于独立的外部文档上下文，默认不会合并到主页面的DOM树中，因此主文档的document.querySelector()方法本就无法直接命中SVG内部的元素，这是符合W3C标准的规范行为。

你观察到的「检查元素后可以正常查询到SVG」是Chromium系浏览器的开发者工具为了方便调试做的特殊适配，不属于标准运行时的特性，相当于调试状态下临时把嵌入SVG的DOM暴露到了主文档查询路径中，才会出现两次查询结果不一致的情况，这属于Chromium系的非标准调试特性带来的非预期表现。

火狐浏览器的表现是完全符合规范的：嵌入<object>的SVG始终属于独立文档，主文档的全局查询无法直接访问内部元素，必须通过独立文档的访问接口查询。

解决方案优化 #

你提到的getSVGDocument()方案失效是因为调用时机早于<object>加载完成，只要监听load事件确保资源加载完成后再执行操作，即可解决刷新后失效的问题，兼容Chrome、火狐双浏览器的实现代码如下：

const svgObject = document.querySelector("object[type='image/svg+xml']");
svgObject.addEventListener('load', () => {
  // 兼容两种获取独立文档的接口
  const svgDocument = svgObject.getSVGDocument() || svgObject.contentDocument;
  svgDocument.querySelector("#myrect").style.fill = "red";
});

内容的提问来源于stack exchange，提问作者Sanchke Dellowar