<object>嵌入SVG后CSS样式不生效，因其加载独立文档上下文，父页CSS无法穿透；需将样式写入SVG内部<style>块，或用JS通过contentDocument动态修改，且须监听load事件并处理跨域、IE兼容及CSP限制。
object 嵌入 SVG 后 CSS 样式为何不生效
因为 <object> 加载的是独立文档上下文，父页的 CSS 规则默认无法穿透到子文档内部。你写 .chart svg path { fill: blue }，对 <object data="chart.svg"> 里的内容完全无效。
常见错误现象：SVG 文件里有 <path fill="#000">，你在父页加了 svg path { fill: red !important }，结果颜色纹丝不动——不是优先级问题，是选择器根本没匹配到。
- 必须把所有样式（包括 hover、focus）直接写进 SVG 文件的
<style>块里，例如：<style>path:hover { fill: #007bff; }</style> - 不要依赖父页 class 控制子 SVG 元素，
<object class="theme-dark">对内部path没用 - 如果要用主题色动态切换，得靠 JS 修改
contentDocument中的<style>或内联fill属性，不能靠 CSS 变量继承
如何用 JS 获取并修改 object 中的 SVG 元素
必须等 <object> 完全加载完成，才能访问其内部 DOM；否则 contentDocument 是 null 或不完整。
典型错误：页面一加载就执行 obj.contentDocument.querySelector("circle")，返回 null——因为 SVG 还没解析完。
立即学习“前端免费学习笔记（深入）”；
- 监听
load事件：obj.addEventListener("load", () => { const svgDoc = obj.contentDocument; /* 此时可操作 */ }); -
contentDocument返回的是 Document 对象，不是普通 DOM 节点，所以要用svgDoc.querySelector("path")，而不是obj.querySelector("path") - 旧版 IE11 不支持
contentDocument，需 fallback 到getSVGDocument()（已废弃但兼容性尚可） - 跨域 SVG 会触发安全限制，
contentDocument直接报错，此时只能改用内联 SVG 或服务端代理
为什么 onclick 在 object 的 SVG 里点不动
不是事件没绑定，而是执行环境隔离：SVG 内部脚本运行在独立作用域，无法访问父页定义的函数，且内联 onclick 会被 CSP 或路径错误静默屏蔽。
常见三类失效原因：
-
<button onclick="handleClick()">——handleClick定义在父页 JS 中，SVG 子文档里找不到这个函数 -
<script href="util.js"></script>写在 SVG 文件里，但<object>不继承父页<base>，相对路径 404，脚本根本没加载 - 父页设置了
Content-Security-Policy: script-src 'self'，SVG 里的内联<script>被浏览器拦截（即使同域）
正确做法是改用 window.parent.postMessage() 主动通知父页，由父页统一处理逻辑。
object 嵌入 SVG 的 fallback 和兼容底线
别指望它在所有环境都“开箱即用”：Safari 旧版有重绘延迟，安卓 WebView 可能禁用内联脚本，IE11 对 contentDocument 支持残缺——这些不是边缘情况，而是真实线上问题。
- 必须提供 fallback 文本：
<object data="chart.svg" type="image/svg+xml">图表加载失败，请升级浏览器</object> - 不要用
target="_blank"在 SVG 内跳转，会破坏当前页状态；改用window.parent.location.href = "..."或发消息后由父页控制 - 移动端 WebView 静默屏蔽内联脚本时，按钮交互会彻底失效，建议关键功能同时提供纯 HTML 备选控件
- 真正麻烦的不是怎么写按钮，而是确认它在哪一层上下文里运行、样式有没有被隔离、消息能不能通——这些细节不验证，上线就出问题
