<object> 用于 SVG 是因它保留 DOM 结构和交互能力，而 <img> 将 SVG 当黑盒；必须设 type="image/svg+xml"、宽高及 fallback 内容，且需监听 load 事件访问内部元素。
为什么用 <object> 而不是 <img>
因为 <img> 把 SVG 当成一张“图”，内部结构完全黑盒：无法用 CSS 修改颜色、不能响应 click 或 hover、JS 也拿不到 <path> 或 <text> 元素。<object> 则把 SVG 当作一个独立文档加载，保留完整 DOM 结构和交互能力——这是它存在的唯一合理理由。
<object> 的基本写法与必须项
最简可用形式是：
<object data="chart.svg" type="image/svg+xml" width="300" height="200"></object>
但实际中必须补全以下三点，否则容易白屏或降级失败：
-
type="image/svg+xml"不可省略，否则浏览器可能当普通二进制文件处理 -
width/height建议显式设置，避免部分浏览器按默认 300×150 渲染（尤其 Safari） - 必须在
<object>标签体内写 fallback 内容，例如：<img src="chart-fallback.png">或纯文本，否则 IE 和旧版 Safari 会留空
JS 访问 SVG 内部元素的时机与限制
SVG 加载完成前，contentDocument 是 null。必须监听 load 事件：
立即学习“前端免费学习笔记（深入）”；
const obj = document.querySelector('object[data="chart.svg"]');<br>obj.addEventListener('load', () => {<br> const svgDoc = obj.contentDocument;<br> const circle = svgDoc.querySelector('circle');<br> circle.style.fill = 'red';<br>});
注意两个硬限制：
- 跨域 SVG 文件会触发 CORS 错误，
contentDocument无法访问（连同querySelector都报错） - 如果 SVG 文件本身含
<script>标签，现代浏览器默认禁用执行（安全策略），别指望它自动跑逻辑
常见错误：本地双击打开时 <object> 不显示
这不是代码问题，而是协议问题：本地文件系统（file:// 协议）下，Chrome/Firefox 拒绝加载外部 SVG，控制台报 Failed to load resource: net::ERR_FILE_NOT_FOUND 或 MIME 类型错误。解决方法只有两个：
- 用本地服务器启动（如
npx serve、python3 -m http.server） - 改用内联 SVG 或
<img>（但失去交互）
另外，某些 Android WebView（尤其 4.4–6.0）对 <object> 的 contentDocument 支持不全，建议加一层存在性判断再操作 DOM。
