Question

我已将SVG文件数据直接嵌入到我的html中。它在Chrome和Firefox中显示，但在IE11中它根本不显示。到SVG的pastebin链接是http://pastebin.com/eZpLXFfD

我尝试添加META TAG但无济于事。起初我认为它可能是IE兼容性视图问题，但切换该功能也不起作用。

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

有任何帮助吗？我还可以提供哪些其他信息来帮助回答这个问题

Answer 1

听起来好像你不是现代文档模式。当您处于标准模式时，Internet Explorer 11会显示SVG。如果您有x-ua-compatible元标记，请确保将其设置为Edge，而不是早期模式。

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

您可以通过打开F12开发者工具并检查文档模式下拉列表（见右上角，当前＆＃34; Edge＆＃34;）或模拟选项卡来确定文档模式：

enter image description here

如果您没有x-ua-compatible元标记（或标题），请务必使用将文档置于标准模式的文档类型，例如<!DOCTYPE html>。

enter image description here

Answer 2

我使用的4个内联svgs中有3个遇到了同样的问题，并且它们只在IE11上消失了（在一个案例中，部分）。

我在页面上有<meta http-equiv="x-ua-compatible" content="ie=edge">。

最后，问题是svg文件上的额外剪切路径。我在Illustrator上打开了文件，删除了剪切路径（通常在图层的底部），现在它们都在工作。

Answer 3

尝试了其他建议无济于事后，我发现此问题与我的样式有关。我不知道为什么，但是我发现我的SVG不可见，因为它们没有在DOM中占据一席之地。

实质上，我的SVG周围的容器的宽度为0，溢出为隐藏。

我通过在容器上设置宽度来解决此问题，但有可能针对该特定问题有更直接的解决方案。

Answer 4

我明白了！该页面使用IE8模式呈现...已

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

标题中的

...将其更改为

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

9，它有效！

Answer 5

我遇到了这个问题，并通过删除了我在SVG上使用的宽度样式来解决了这个问题：

.svg-div img {
    width: 200px; /* removed this */
    height: auto;
}

Answer 6

每个元素都有重复的样式属性。

style="opacity:0.8"

由于此错误，这肯定不会在Firefox上显示。如果它显示在Chrome上，则最有可能引发Chrome错误。

Answer 7

检查浏览器是否为IE-

  $ua = htmlentities($_SERVER['HTTP_USER_AGENT'], ENT_QUOTES, 'UTF-8');
  if (preg_match('~MSIE|Internet Explorer~i', $ua) || (strpos($ua, 'Trident/7.0') !== false && strpos($ua, 'rv:11.0') !== false)) {
    // do stuff for IE Here
  }

IE11元元素打破SVG

7 个答案: