在Microsoft Edge 42的css中使用SVG片段标识符进行背景图像（17134）

Question

用于在Microsoft Edge中工作的SVG图像的片段标识符（Safari中的已知问题）。在同一页面上多次使用相同的SVG堆栈（至少2次）时，最新的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）实现而不完全改变渲染？

Answer 1

更新：一种可能的解决方法是将* .svg替换为* .svg？任何东西。此解决方法的一个主要缺点是，所有性能/缓存优势都会丢失。

更新的例子：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;
}

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

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