最常见原因是MIME类型不匹配或路径错误：服务端未返回Content-Type: image/svg+xml，或本地file://协议下无服务器导致MIME缺失；data属性值必须为URL，不能是base64；需监听load事件并校验contentDocument存在后操作。
用 <object> 加载 SVG 时为什么没显示？
最常见原因是 MIME 类型不匹配或路径错误。<object> 要求服务端返回的 SVG 文件 Content-Type 必须是 image/svg+xml，否则多数浏览器（尤其是 Chrome 和 Safari）会直接拒绝渲染，甚至不触发 onerror。本地双击 HTML 打开时走 file:// 协议，服务器缺失，MIME 更易出错。
实操建议：
- 优先通过本地开发服务器启动（如
python3 -m http.server 8000），避免file://下的 MIME 问题 - 检查网络面板中 SVG 请求的 Response Headers，确认含
Content-Type: image/svg+xml -
data属性值必须是相对或绝对 URL，不能是内联字符串或 base64（<object data="data:image/svg+xml;base64,...">不可靠，Firefox 支持差）
<object> 与 <img>、<iframe> 的关键区别
<object> 是唯一能让外部 SVG 参与 DOM 交互的方式——它的内容文档可被 JS 访问（通过 contentDocument），内部元素能响应事件、被 CSS 选中、动态修改。而 <img> 是封闭图像，<iframe> 虽可访问但有同源限制且语义不符。
使用场景判断：
立即学习“前端免费学习笔记（深入）”；
- 需要给 SVG 中的
<path>添加 hover 效果？→ 用<object> - 只做静态图标，且需 SEO alt 文本？→ 用
<img>（支持alt属性） - SVG 来自第三方域名且需交互？→
<object>会因同源策略失败，此时只能退回到<img>或服务端代理
如何安全获取并操作 <object> 内部 SVG 的 DOM？
<object> 加载完成前访问 contentDocument 会得 null；加载失败时该属性也可能为 null，不能直接链式调用。
实操建议：
- 监听
load事件，而非DOMContentLoaded—— 它针对的是<object>自身资源加载完成 - 始终校验
obj.contentDocument是否存在，再取documentElement或查询元素 - 示例片段：
<object id="chart" data="chart.svg"></object>
<script>
const obj = document.getElementById('chart');
obj.addEventListener('load', () => {
const svgDoc = obj.contentDocument;
if (svgDoc) {
const path = svgDoc.querySelector('path');
if (path) path.style.stroke = 'red';
}
});
</script>
IE 和旧版 Edge 对 <object> SVG 的兼容陷阱
IE11 及更早版本对 <object> 加载 SVG 支持极不稳定：有时不触发 load，有时 contentDocument 返回空文档，且不报错。Edge 17–18 也存在类似问题。
应对策略：
- 若必须支持 IE，改用
<embed>（IE 对它更友好），但<embed>没有标准的load事件，需轮询getSVGDocument()方法 - 现代项目应明确放弃 IE 支持，用
<object>+load+contentDocument组合即可 - 务必在真实环境测试：Webpack Dev Server 默认不设 SVG MIME，需插件（如
webpack-dev-server的headers配置）或换用serve等工具
Content-Type 或一次静默的 CORS 拒绝，就让整个交互能力失效。 
