Question

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

enter image description here

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容器内部带有image标签。此示例有两个图像，因此我可以使用Javascript切换活动/非活动状态。您还必须手动关闭图片代码，＆＃34;＆lt; image /＆gt;＆＃34; 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>

SVG未在IE 11中显示

2 个答案: