Html SVG 作为 <img> 标记中的源未显示在 Internet Explorer 11 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20637771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG as source in <img> tag not displaying in Internet Explorer 11
提问by Matt Harris
I'm trying to display an SVG file as the src of an <img>
我正在尝试将 SVG 文件显示为<img>
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.
直接在 IE 中打开文件，图像显示完美，因此实际 SVG 文件应该没有任何问题。IE 控制台中没有错误或警告，而且我使用的是最新版本的浏览器。
HTML:
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?
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.
编辑：SVG 是一个自动生成的大型文件，可以在此处查看示例。用于生成它的代码很旧，是否与顶部的 DOCTYPE 有关？我尝试更改它，但仍然无法显示任何内容。
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?
编辑 2：我已经让它工作了......有点。当我按 F12 并转到“仿真”选项卡时，出于某种原因，它显示 IE 正在以文档模式 7 显示页面，即。使用不支持 SVG 的 IE7 兼容模式。我可以手动单击任何更高版本，它显示正常。我的下一个问题是：为什么？为什么它以模式 7 运行显示页面，我该如何停止这种行为？
采纳答案by Matt Harris
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.
我找到了问题所在。我正在通过 Intranet 查看页面，但我不确定为什么，但 IE 的默认设置是“在兼容性视图中显示 Intranet 站点”。只需在兼容性视图设置中取消选中该框即可。SVG 在 IE7 中根本不起作用，所以这就是为什么我没有得到图像的原因。
回答by bradw2k
I have found that having a style of "width" on the img (to scale it down) works in Edge and Chrome, but makes it disappear in IE11. Rather setting both "max-width" and "max-height" seems to work in all three of those browsers.
我发现在 img 上设置“宽度”样式（将其缩小）在 Edge 和 Chrome 中有效，但在 IE11 中会消失。相反，同时设置“max-width”和“max-height”似乎适用于所有这三种浏览器。
回答by Ryan
This can also be caused by sending the svg as plain/text and not as an image/svg+xml. In Apache you can fix this by adding to your .htaccessfile -
这也可能是由于将 svg 作为纯文本/文本而不是image/svg+xml. 在 Apache 中，您可以通过添加到.htaccess文件中来解决此问题-
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
回答by Graeme Wilkinson
You may find turning this mode off makes your website work, however there are still browsers that do not support .svgimages. Those browsers will show the result as you saw with this box unticked.
您可能会发现关闭此模式可以使您的网站正常工作，但仍有一些浏览器不支持.svg图像。这些浏览器将显示您在未选中此框的情况下看到的结果。
Using SVG as an <img>If I save the SVG to a file, I can use it directly in an <img>tag.
使用 SVG 作为 SVG<img>如果我将 SVG 保存到文件中，我可以直接在<img>标签中使用它。
<img src="kiwi.svg" alt="Kiwi standing on oval">
In Illustrator, our artboard was 612px ? 502px.
在 Illustrator 中，我们的画板是 612px ？502 像素。
That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG.
这正是图像在页面上的大小，留给自己。您可以通过选择 img 并更改其宽度或高度来更改它的大小，就像您可以更改 PNG 或 JPG 一样。
Browser support
浏览器支持
Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.
以这种方式使用它有自己的一组特定浏览器支持。本质上：它适用于除 IE 8 及更低版本和 Android 2.3 及更低版本之外的任何地方。
If you'd like to use SVG, but also need to support these browsers that don't support using SVG in this way, you have options.
如果您想使用 SVG，但还需要支持这些不支持以这种方式使用 SVG 的浏览器，您可以选择。
One way is to test for support with Modernizr and swap out the src of the image:
一种方法是测试对 Modernizr 的支持并换出图像的 src：
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}
David Bushell has a really simple alternative, if you're OK with JavaScript in the markup:
David Bushell 有一个非常简单的替代方法，如果您对标记中的 JavaScript 没问题：
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">
This has been pulled from CSS Tricks, click to read the full article.
