SVG在Angular应用程序中使用数据更新闪烁

Question

我正在使用Angular 4中的应用程序.在一个视图中,我使用了从API请求中检索的数据之间的一些svgs.它看起来像这样:

<div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#message-icon"></use></svg>
  </div>
  <div>{{machine.state}}</div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#settings-icon"></use></svg>
  </div>
</div>

所有svgs都放在一个文件(machine.svg)中,并在带有id的<symbol>标签中定义.

现在我的问题是当我每隔2秒设置一次间隔来更新API请求中的数据时,我的svg图标似乎随每次更新而闪烁,但它只发生在Chrome中.

我检查了网络日志,似乎每个API请求都下载了整个svg文件:

在Mozilla中一切正常,svg只下载一次:

我试图将svg放在<object>标签中,但请求数量更多.将每个svg放在<img>标签中似乎解决了请求的问题,但我更愿意控制"填充"属性.将整个svg直接放在页面上也解决了问题,但它似乎不是一个干净的解决方案.

我的问题是,如果有一种方法可以从文件中检索svg,而Chrome没有经常下载吗？

Answer 1

尝试配置您的服务器以cache-control向这些请求添加标头。我在本地主机上有同样的问题，但在我的生产服务器上图标带有cache-control: max-age=172800标题，并且不会再次重新请求。