SVG作为对象 vs 内联SVG：内联SVG正常工作的技术问询

咱们先从你给出的代码例子说起——你给内联SVG加了全局CSS样式：

svg{ position: absolute; left: 0; background-color: green; }

这段代码能直接生效，是因为内联SVG本身就是当前HTML文档DOM树的一部分，页面里的CSS、JS都能直接“触达”它。但换成<object>引入SVG的话，情况就完全不一样了，核心差异主要在这几个方面：

• 样式作用域的隔离
  用<object data="your.svg"></object>引入的SVG，相当于在页面里嵌入了一个独立的小文档，有自己的DOM上下文。外部HTML里的CSS规则（比如你写的svg{...}）只能作用于<object>这个容器元素，根本穿不透到里面的SVG上。如果要给这种SVG加样式，要么在SVG文件内部直接写<style>标签，要么在SVG里用@import引入外部CSS，或者通过JS跨文档操作（但有同源限制）。

• DOM与脚本访问的限制
  内联SVG的元素可以被当前页面的JS直接调用，比如document.querySelector('svg path')就能轻松拿到对应元素。但<object>里的SVG属于独立文档，同域情况下你得先通过object.contentDocument获取它的DOM才能操作；如果是跨域的SVG（比如从外部服务器加载的），浏览器的同源策略会直接阻止你访问内部内容，连读取都做不到。

• 资源加载的独立性
  内联SVG和HTML一起被解析渲染，不需要额外的HTTP请求（除非SVG里引用了外部图片、字体），所以渲染时机和页面完全同步，不会出现加载延迟或失败的问题。但<object>引入的SVG需要单独发请求加载，如果路径写错、服务器响应异常，或者加载速度慢，页面上就会显示空白占位符，看起来就像“异常”了。

• 浏览器行为的细微差异
  虽然现在主流浏览器对SVG的支持都很好，但早期部分浏览器对<object>嵌入的SVG处理有细节bug——比如对SVG内部的滤镜、自定义字体支持不稳定，或者默认给<object>加了边框、占位样式，要是没手动清除，布局就会和预期不符。而内联SVG完全继承页面的布局规则，不容易出现这类问题。

举个实际例子：你代码里的绿色背景和绝对定位，内联SVG能直接用上，但<object>引入的话，只有<object>容器会受这个CSS影响，里面的SVG还是原来的样子，自然看起来“不正常”。

内容的提问来源于stack exchange，提问作者Jay