用<object>而非<img>因需操作SVG内部元素、执行脚本、响应事件及提供fallback；<object>将其当子文档加载，保留XML结构、内联脚本与样式继承能力。
为什么用 <object> 而不是 <img>
因为你要操作 SVG 内部元素、执行脚本、响应点击，或者需要 fallback 文案——<img> 会把 SVG 当纯图片处理，所有 DOM 和 JS 都被剥离。<object> 把 SVG 当子文档加载，保留其 XML 结构、内联 <script>、CSS 样式继承（有限）、以及可访问的 contentDocument。
<object> 标签必须写的属性有哪些
最少要写 data 和 type，否则浏览器无法识别内容类型或来源：
-
data：指向 SVG 文件的相对或绝对路径，比如"./assets/logo.svg"；注意大小写和斜杠方向（Linux 服务器敏感） -
type：固定为"image/svg+xml"，漏写或写错（如"image/svg"）会导致 fallback 触发或静默失败 -
width/height：建议显式设置，否则可能渲染为 300×150 像素默认尺寸，且部分浏览器不自动按 viewBox 缩放 - fallback 内容必须写在开始与结束标签之间，例如：
Your browser does not support SVG，否则降级不可见
加载后怎么用 JS 操作 SVG 里的按钮或路径
不能直接 document.querySelector("#my-button") —— 它不在主文档里。必须等加载完成、确认同源、再通过 contentDocument 访问：
- 监听
load事件：obj.addEventListener("load", () => { ... })，否则contentDocument可能为null - 检查是否同源：
obj.contentDocument在跨域时会被浏览器置为null，控制台报Blocked a frame with origin ... from accessing a cross-origin frame - 取内部元素：
obj.contentDocument.querySelector("circle")，但注意：SVG 内部若用了id="btn"，得确保没重复 ID，否则行为不可靠 - 样式不能从父页穿透进来，hover 或 class 切换必须写在 SVG 文件内部的
<style>块里
常见白屏/点击无效的三个硬伤
不是代码写错了，而是上下文隔离导致的 silent fail：
立即学习“前端免费学习笔记（深入）”；
-
onclick="doSomething()"失效：函数定义在父页 JS 中，SVG 子文档无权调用；改用<script>内联到 SVG 文件里，或用postMessage通信 - 内联
<script>被拦截：父页设置了Content-Security-Policy: script-src 'self'，而 SVG 的内联脚本被当成不安全来源；需加'unsafe-inline'或改用外部脚本（但<object>不继承父页 base URL，路径易 404） - 本地双击打开 HTML：
file://协议下，Chrome/Firefox 直接拒绝解析image/svg+xmlMIME 类型，必现空白；必须起 HTTP 服务（如npx http-server）
真正卡住人的从来不是“怎么写”，而是“在哪一层执行”——SVG 在 <object> 里是独立文档，它的 JS、CSS、DOM 全部自成体系，越早意识到这个边界，越少花时间在 console 里找不存在的元素。
