<object>元素能否嵌入SVG？缓存场景下SVG的CSS样式化咨询

1. <object>元素是否仍可用于嵌入SVG文件？ #

当然可以，<object>元素目前并未被废弃，依然是嵌入独立SVG文件的有效方式。它能保持SVG资源的独立性，浏览器会单独请求并解析SVG文件，支持SVG内部的脚本、样式等完整功能，适合需要复用独立SVG资源的场景。

2. 若需利用浏览器缓存优势，该如何通过CSS为SVG设置样式？ #

要兼顾浏览器缓存和SVG样式控制，推荐两种实用方案：

方案一：SVG内部引入外部CSS文件 #

直接在SVG文件的<defs>标签内添加<link>引入外部样式表，这样SVG文件和CSS文件都能被浏览器独立缓存，后续加载时直接复用缓存资源，修改样式只需更新CSS文件即可。示例如下：

SVG文件内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <link rel="stylesheet" type="text/css" href="svg-styles.css" />
  </defs>
  <rect class="svg-box" x="10" y="10" width="80" height="80" />
</svg>

外部样式表svg-styles.css内容：

.svg-box {
  fill: #42b983;
  stroke: #333;
  stroke-width: 2;
}

这种方法并没有过时，也不属于不当建议，只是因为内联SVG的场景更常见，所以相关示例较少，但完全可以正常使用。

方案二：CSS变量配合外部样式表 #

如果希望在HTML层面灵活调整SVG样式，可在SVG内部定义CSS变量，再通过外部CSS修改变量值。SVG文件依然能被缓存，样式调整更灵活：

SVG文件内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .svg-box {
      fill: var(--svg-fill, #42b983);
      stroke: var(--svg-stroke, #333);
      stroke-width: 2;
    }
  </style>
  <rect class="svg-box" x="10" y="10" width="80" height="80" />
</svg>

HTML页面的外部CSS内容：

object svg .svg-box {
  --svg-fill: #ff6b6b;
  --svg-stroke: #222;
}

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