SVG作为< img>的来源标记不在Internet Explorer 11中显示 [英] SVG as source in <img> tag not displaying in Internet Explorer 11

问题描述

我试图将SVG文件显示为 < img> 标签的src根据 caniuse.com/svg-img 我应该可以在所有最新的浏览器中完成）。该文件显示在Chrome和Firefox中，但Internet Explorer只显示带有x的黑框，如下所示： stack.imgur.com/0schW.pngalt =在$在IE中直接打开文件时，图像显示完美，所以它不应该是实际的SVG文件有任何问题。 IE控制台中没有错误或警告，我正在使用最新版本的浏览器。

HTML：

 < div id =plot> ; 
< img id =svgsrc =plot1.svgheight =100％width =100％/> 
< / div> 
  

样式表：

  #plot {
 float：right; 
 width：650px; 
 height：550px; 
背景：#ffffff; 
} 
 
 #plot svg {
 margin-left：auto; 
 margin-right：auto; 
溢出：可见; 
} 
  

x出现的可能原因是什么？

编辑：SVG是一个大型的自动生成文件，可以看到一个例子这里。用于生成它的代码已经很久了，可能与顶层的DOCTYPE有关吗？我试图改变它，但不能让任何东西显示仍然。

编辑2：我有它的工作...有点。当我按下F12并转到模拟选项卡时，由于某种原因，它显示IE正在以文档模式7显示页面，即。对IE7使用兼容模式，不支持SVG。我可以手动点击任何更高版本，并显示正常。我的下一个问题是：为什么？为什么它在模式7中显示页面，我该如何阻止这种行为？

解决方案

我发现了这个问题。我正在通过Intranet查看该页面，但我不确定为什么，但IE的默认设置是在兼容性视图中显示Intranet站点。只需在兼容性视图设置中取消选中该框即可。 SVG在IE7中完全不起作用，所以这就是为什么我没有获得图像。

I'm trying to display an SVG file as the src of an <img> tag (which according to caniuse.com/svg-img I should be able to do in all recent browsers). The file is displayed in Chrome and Firefox but Internet Explorer just displays a black box with an x, as shown below:

On opening the file directly in IE, the image is displayed perfectly, so it shouldn't be anything wrong with the actual SVG file. There are no errors or warnings in the IE console, and I'm using the most recent version of the browser.

HTML:

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

Stylesheet:

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

What are some possible reasons for the appearance of the x?

Edit: The SVG is a large auto generated file, an example of which can be seen here. The code that's being used to generate it is old, could it be something to do with the DOCTYPE at the top? I tried changing it but couldn't get anything to display still.

Edit 2: I have got it working... sort of. When I press F12 and go to the "emulation" tab, for some reason it shows that IE is displaying the page in Document Mode 7, ie. using compatibility mode for IE7, which doesn't support SVG. I can manually click any of the higher versions and it displays fine. My next question is: why? why is it running displaying the page in mode 7, and how do I stop this behaviour?

解决方案

I've found the problem. I was viewing the page over intranet, and I'm not sure why, but IE's default setting is to "display intranet sites in Compatibilty View". Just had to untick that box in compatibility view settings. SVG doesn't work at all in IE7, so that's why I was getting no image.

这篇关于SVG作为< img>的来源标记不在Internet Explorer 11中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！