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> 无论如何都是隐藏的，因此它们不会干扰任何其他 DOM 元素。然后你必须 xlink 到当前页面。

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

如果您厌倦了用 <symbols> 的弹幕弄脏您美丽的页面（嘿，这是一种合理的厌恶），请使用 svg4everybody 并迫使 IE 屈服于您的意志。

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

Icomoon icons (svg) not loading in Internet Explorer (ie)

icons

internet-explorer

svg

loading

pyramid