当与 SVG Sprites 一起使用时，SVG 在 IE 和 safari 中不起作用。

Question

我正在使用 SVG Sprites 在我的页面上添加 svg 图标。 Chrome 和 Firefox 没有问题，但我无法在 IE 和 Safari 中看到任何 svg 图标。

<div class="toggle-icons">
<span class="toggle-rows active">
<svg class="icon"  >
<use xmlns:xlink="http://www.w3.org/1999/xlink" link:href="icons.svg#icon-photo-row"></use>
</svg>
<input type="radio" name="toggle" value="row"> 
</span>
<span class="toggle-grid">
<svg class="icon"  >
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-photo-grid"></use>
</svg>        
<input type="radio" name="toggle" value="grid">
</span>
</div>

icons.svg 看起来像这样

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<symbol id="icon-photo-row" viewBox="0 0 19.983 11.084">
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="0.375" x2="3.75" y2="0.375"/>
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="0.375" x2="19.983" y2="0.375"/>
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="5.542" x2="3.75" y2="5.542"/>
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="5.542" x2="19.983" y2="5.542"/>
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="10.709" x2="3.75" y2="10.709"/>
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="10.709" x2="19.983" y2="10.709"/>
</symbol>

<symbol id="icon-photo-grid" viewBox="0 0 18.28 18.271">
<rect x="0.375" y="0.375" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.409" height="7.411"/>
<rect x="10.493" y="0.375" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.412" height="7.411"/>
<rect x="0.375" y="10.488" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.409" height="7.408"/>
<rect x="10.493" y="10.488" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.412" height="7.408"/>
</symbol>
</svg>

CSS:

.toggle-icons svg.icon {
  width: 3rem;
  height: 3rem;
  fill: #bfbfbf;
  stroke: #4D5E68;
  vertical-align: middle;
}

.toggle-icons span.active svg.icon {
  fill: #95a1aa;
}

任何人都可以解释为什么在 IE 和 Safari 上呈现 SVG 时出现问题以及可能的修复方法是什么？

提前致谢

Answer 1

Svg4everybody 解决了问题。现在它在 IE 和 Safari 上都可见。

Answer 2

svg4everybody使用requestAnimationFrame，导致调用过多。因此，我编写了一个简单且轻量级的 polyfill，当浏览器本身无法获取和缓存元素中引用的外部 SVG 时。这个 polyfill 使用特征检测而不是浏览器嗅探。在 github 上：https://github.com/Keyamoon/svgxuse

现场演示：https://icomoon.io/svgxuse-demo

当与 SVG Sprites 一起使用时，SVG 在 IE 和 safari 中不起作用。

SVG doesn't work in IE and safari when used with SVG Sprites.

html

css

safari

internet-explorer

svg