阻止Chrome两次下载SVG精灵

Question

我尝试从每个图标的一个SVG文件迁移到所有这些图标的单个SVG精灵。我想这个精灵只加载一次。

但是，每当我尝试将图标附加到文档时，Google Chrome似乎都会重新加载该文件。如何防止这种情况？

以下是简化的测试用例。打开＆＃34;网络＆＃34;在开发工具中选项卡，按＆＃34;精灵＆＃34;过滤，然后点击＆＃34;运行＆＃34;。您会注意到Google Chrome会尝试加载＆＃34; sprite.svg＆＃34;两次，而Firefox只会执行一次。

＆＃13;

＆＃13;

setTimeout(function () {
  foo.innerHTML = [
    '<svg role="presentation" viewBox="0 0 100 100">',
    '<use xlink:href="sprite.svg#foo">',
    '</use>'
  ].join('');
}, 1000);

＆＃13;

<svg role="presentation" viewBox="0 0 100 100">
  <use xlink:href="sprite.svg#foo"></use>
</svg>

<div id="foo"></div>

＆＃13;

＆＃13;

＆＃13;