用于 svg 是因它保留 dom 结构和交互能力，而 将 svg 当黑盒；必须设 type="image/svg+xml"、宽高及 fallback 内容，且需监听 load 事件访问内部元素。
为什么用 <object></object> 而不是 <img>
因为 <img> 把 SVG 当成一张“图”，内部结构完全黑盒：无法用 CSS 修改颜色、不能响应 click 或 hover、JS 也拿不到 <path></path> 或 <text></text> 元素。<object></object> 则把 SVG 当作一个独立文档加载，保留完整 DOM 结构和交互能力——这是它存在的唯一合理理由。
<object></object> 的基本写法与必须项
最简可用形式是：
<object data="chart.svg" type="image/svg+xml" width="300" height="200"></object>
但实际中必须补全以下三点，否则容易白屏或降级失败：
-
type="image/svg+xml"不可省略，否则浏览器可能当普通二进制文件处理 -
width/height建议显式设置，避免部分浏览器按默认 300×150 渲染（尤其 Safari） - 必须在
<object></object>标签体内写 fallback 内容，例如：<img src="chart-fallback.png">或纯文本，否则 IE 和旧版 Safari 会留空
JS 访问 SVG 内部元素的时机与限制
SVG 加载完成前，contentDocument 是 null。必须监听 load 事件：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
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></script>标签，现代浏览器默认禁用执行（安全策略），别指望它自动跑逻辑
常见错误：本地双击打开时 <object></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></object> 的 contentDocument 支持不全，建议加一层存在性判断再操作 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
