在 Microsoft Edge 42 中将 SVG 片段标识符用于 css 中的背景图像 (17134)答案

【问题标题】：Using SVG Fragment Identifiers for background images in css with Microsoft Edge 42 (17134)在 Microsoft Edge 42 中将 SVG 片段标识符用于 css 中的背景图像 (17134)
【发布时间】：2018-06-06 10:38:04
【问题描述】：

用于在 Microsoft Edge 中工作的 SVG 图像的片段标识符（Safari 中的已知问题）。在同一页面上多次（至少 2 次）使用相同的 SVG 堆栈时，最新的 Edge 版本（Microsoft Edge 42 Build 17134）始终显示相同的片段 ID 引用图像。

使用上述浏览器时可以重现该问题（多次重新加载页面并且显示的图标可能会更改，但对于以下示例中的所有三个图标始终相同（可以使用任何 svg 堆栈重现）：

https://codepen.io/chriscoyier/pen/GndhE

HTML

<h3>background-image with #fragment referencing &lt;view></h3>

<span class="icon icon-clock"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-arrow-right"></span>

CSS

.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-arrow-right-view) no-repeat;
}

还报告了这里的问题： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17787431/

有没有人知道这个问题的解决方法，可以在不完全改变渲染的情况下作为修补程序（CSS 或 JS）实现？

【问题讨论】：

标签： css svg microsoft-edge fragment-identifier

【解决方案1】：

更新：一种可能的解决方法是将 *.svg 替换为 *.svg?anything 。这种解决方法的一个主要缺点是，所有性能/缓存优势都丧失了。

更新示例：https://codepen.io/jbeargraphics/pen/wXWQLo

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?1#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?2#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?3#icon-arrow-right-view) no-repeat;
}

这只是一个快速修补程序（但有效）。仍在寻找更好的解决方法。

编辑：这是一个可选的解决方法，不是问题的令人满意的答案。

【讨论】：