Icomoon 图标 (svg) 未在 Internet Explorer (ie) 中加载

Question

我正在为我的 jQuery Mobile/Python PyramidHo 应用程序使用 Icomoon 的图标。我目前正在本地主机上进行测试，但部署时也存在问题。它们适用于 Chrome 和 Firefox。它们没有出现在 Internet Explorer 11 中。据我所知，它们甚至没有被 Internet Explorer 加载。

我已经尽可能多地阅读了这个问题，但没有运气。

我在标签顶部放置了以下元标签

<meta http-equiv="X-UA-Compatible" content="IE=edge">

我已经添加了 html5 shiv：

    <!--[if lt IE 9]>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js">  </script>
    <![endif]-->

我的回复有以下设置：

response.cache_control.no_store = (bool) False
response.pragma = None

我正在使用这样的图标：

            <a href="demo_home"   data-role="button"  class="mp-menu-btn">
                <span class="mp-circle mp-bg-drkblue mp-menu-btn-icon-bg"></span>
                <svg class="icon icon-home2 mp-menu-btn-icon"><use xlink:href="/static/graphics/icons/symbol-defs.svg#icon-home2"></use></svg>
                <span class="mp-btn-text mp-font-xlg">Demos</span>
            </a>

如何让 svg 文件加载并在 Internet Explorer 中显示图标？

编辑

在进行更多调试后，我可以清楚地看到对 SVG 图标文件的请求甚至没有到达我的后端金字塔服务器。 IE 正在阻止或忽略该请求。

Answer 1

我以前经历过这种情况。 IE 忽略对 SVG 的所有外部调用。简单的答案是将<symbol> defs 包含在HTML 的正文中。由于这些<symbol>s 无论如何都是隐藏的，它们不会干扰任何其他DOM 元素。然后你必须xlink 到当前页面。

<use xlink:href="#icon-home2"></use>

如果你被<symbols> 的弹幕弄乱了你漂亮的页面而感到恶心（嘿，这是一种合理的厌恶），请使用svg4everybody 并迫使IE 屈服于你的意志。