SVG 未在 IE 11 中显示

Question

我在site 中使用了来自OpenClipart 的几张svg 图片。 svg 图像在 Chrome 和 Firefox 中正确显示。但是，当我看到该站点是 IE11 时，图像如下所示。我尝试了一些来自 SO 和其他网站的技巧，但它们没有任何作用。

Here是使用博主搭建的网站。这是对应的html代码。

<a href="http://www.thecloudavenue.com/search/label/gettingstarted">
   <img src="http://openclipart.org/people/shokunin/runer_start.svg" style="border: none" height="110" width="110" align="middle"/>
</a>

如何解决这个问题？如果我用其他类型替换 svg，那么它应该可以工作。但是，我很好奇为什么会显示 svg。

Answer 1

IE 对 SVG 的支持在几个方面偏离了标准。以下是一些：

• 标记元素的属性在引用点继承，而不是从 marker 元素的祖先继承
• 不支持pathLength 属性
• 片段规范中viewBox 元素的参数除了逗号之外还可以用单个空格分隔
• display 属性会影响 pattern 元素以及对这些 pattern 元素的引用。
• 不支持 SMIL 动画。此外，不支持在SVG 1.1 的其他章节中对animation 元素、属性、属性、接口或数据类型的引用。
• 对于可以动画的数据类型，animVal 属性的默认设置是animVal = baseVal。

参考文献

• MS-SVG:2.1 Normative Variations

Answer 2

您需要像下面这样声明带有图像标签的 svg 容器。此示例有两个图像，因此我可以使用 Javascript 切换活动/非活动条件。此外，您必须手动关闭图像标签，IE中不允许使用“”自关闭标签。

<svg id="globalNav_icon_usersSearch" height="20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image class="icon_search" x="0" y="0" height="20" width="20"  xlink:href="svg/icon_search.svg"></image>
        <image class="icon_search_grey" x="0" y="0" height="20" width="20"  xlink:href="svg/icon_seacrh_grey2.svg"></image>
      </svg>