使用<object>嵌入SVG必须指定type="image/svg+xml"且服务器返回Content-Type为image/svg+xml，加载后需监听load事件才能安全访问contentDocument，跨域时contentDocument为null，SVG内脚本无法调用父页面函数，须用postMessage通信或内置逻辑。
用 <object> 嵌 SVG 时必须写 type="image/svg+xml"
不加 type 属性，部分浏览器（尤其是旧版 Safari 和 IE11）会当成未知资源，直接 fallback 或空白；加错类型（比如写成 type="svg" 或留空）也会触发降级。服务器返回的响应头 Content-Type 必须是 image/svg+xml，否则 Chrome/Firefox 会无视 type 并 fallback——Nginx/Apache 需显式配置 MIME 类型，否则本地双击打开或 file:// 协议下必然失败。
<object> 加载后 JS 访问 SVG 内部元素要等 load 事件
直接在 <object> 后写 obj.contentDocument.querySelector("text") 几乎总是 null，因为 DOM 还没解析完。必须监听 load 才能安全访问：
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
const svgDoc = obj.contentDocument;
const textEl = svgDoc.querySelector('text');
if (textEl) textEl.style.fill = 'red';
});
- 跨域 SVG 时
contentDocument为null，无法访问 - 移动端 WebView 可能静默屏蔽内联脚本，
load事件也可能不触发，务必提供 fallback 文本 - 不要依赖
setTimeout等“猜时机”，它不可靠且难调试
想让 SVG 里的文字可选、可复制？<object> 是少数可靠方案
<img src="chart.svg"> 会把整个 SVG 当作位图渲染，里面所有 <text> 节点都失去语义，无法高亮、复制、被屏幕阅读器识别。<object> 则保持 SVG 作为独立 XML 文档加载，文本节点保留在 DOM 中，原生支持选择、缩放、无障碍属性（如 aria-label、<title>）。但注意：
- SVG 文件里不能有 BOM 或 UTF-8 编码错误，否则整个文档解析失败，显示为空白
- 不要在 SVG 内写
<html>或<body>，<object>只接受纯 SVG XML 结构 - CSS 不会从父页穿透进来，样式必须写在 SVG 内部（
<style>块或内联style属性）
按钮点击没反应？问题不在 SVG 代码，而在执行上下文隔离
SVG 文件里写 <g onclick="doSomething()">，而 doSomething 定义在父页面 JS 中——这不会工作。<object> 创建的是独立文档上下文，父页函数不可见。常见失效原因包括：
立即学习“前端免费学习笔记（深入）”；
- 内联
<script>被 CSP 拦截（即使同域，script-src 'self'默认禁用内联脚本） - SVG 引用了相对路径 JS（如
<script href="util.js">），但<object>不继承父页 base URL，结果 404 - onclick 绑定的是字符串，不是函数引用，无法跨上下文调用
真正可行的交互方式只有两种：把逻辑全写进 SVG 文件内部；或用 postMessage 在父子文档间通信——别指望“直接调用”能成功。
最麻烦的从来不是怎么写标签，而是搞清哪些东西在哪个上下文里、消息能不能通、样式有没有被隔离。这些边界问题不提前验证，上线后就是白屏加 silent fail。
