object标签加载SVG后无法用document.getElementById等直接获取内部节点，因其DOM树独立于主页面，需通过同源object的contentDocument访问，跨域或CSP限制时应改用内联SVG、fetch+DOMParser或postMessage方案。
object 标签加载 SVG 后，**无法直接用 document.getElementById 或 querySelector 查到 SVG 内部节点**——这不是你代码写错了，是 DOM 隔离机制在起作用。
为什么 document.querySelector 找不到 SVG 里的 #my-button
因为 object 加载的 SVG 是一个独立文档上下文（类似 iframe），它的 DOM 树完全不挂在主页面 document 下。即使 SVG 文件里写了 <g id="my-button"></g>，父页 JS 运行 document.getElementById("my-button") 也一定返回 null。
常见错误现象：
- 控制台报错
Cannot read property 'addEventListener' of null - 用 DevTools 的 Elements 面板点开
<object>，里面只显示一个空壳，看不到<svg>子树 - SVG 显示正常，但 hover、click 都没反应，以为是 CSS 或事件绑定问题
必须等 load 事件后通过 contentDocument 访问
只有等 object 加载完成，才能拿到它的内部文档对象。但有三个硬性前提：
立即学习“前端免费学习笔记（深入）”；
-
object必须同源（即 SVG 文件和 HTML 页面在同一域名、协议、端口） - 服务器响应头不能禁用
contentDocument（比如设置了Content-Security-Policy: sandbox） - 不能用
data:URI 或 blob URL 加载——部分浏览器会拒绝暴露contentDocument
正确做法示例：
<object id="chart" type="image/svg+xml" data="chart.svg"></object>
<script>
const obj = document.getElementById("chart");
obj.addEventListener("load", () => {
const svgDoc = obj.contentDocument; // 注意：仅同源有效
if (svgDoc) {
const btn = svgDoc.getElementById("my-button");
if (btn) btn.addEventListener("click", handleSvgClick);
}
});
</script>
跨域或 CSP 限制下 alternative 方案
一旦遇到跨域、CSP 拦截或 contentDocument 为 null（比如某些 PDF 嵌入场景），就别硬刚了。可用这些更稳的替代路径：
- 改用内联 SVG：
<svg>...</svg>直接写进 HTML，所有节点天然可查、可样式、可交互 - 用
fetch+DOMParser动态加载 SVG 字符串，再appendChild到容器中（需处理<use>引用、<defs>等依赖） - 让 SVG 内部主动发
postMessage，父页监听并响应——这是唯一能绕过同源限制的通信方式
注意：img 标签完全不可行，它把 SVG 当作位图处理，连 contentDocument 都没有。
容易被忽略的 viewBox 与事件捕获干扰
即使成功拿到 svgDoc.getElementById，点击也可能失效。两个隐蔽原因：
-
<object width="200" height="100">会强制拉伸 SVG，覆盖掉viewBox的原始比例，导致<g onclick>坐标错位、点击区域偏移 - 如果 SVG 内部用了
<g pointer-events="none">或父容器设置了pointer-events: none，事件根本传不到子元素
调试建议：在 load 回调里加一句 console.log(svgDoc.documentElement)，确认是否真拿到了根 <svg> 节点；再检查该节点的 getBoundingClientRect() 是否与预期尺寸一致。
