Html SVG 不呈现 IE 11
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41831355/
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 not rendering IE 11
提问by Samuel
I've the html code here. The svg does not render with IE 11. Can't find out why.
我这里有 html 代码。svg 无法使用 IE 11 呈现。找不到原因。
I've added as seen in another place :
我在另一个地方添加了：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I suspect the image is here but not visible. Or it could be the large data=which is not interpreted correctly. How to check ?
我怀疑图像在这里但不可见。或者它可能data=是未正确解释的大。如何检查？
采纳答案by Samuel
What I've done to make it work :
我为使其工作所做的工作：
In the svgfile :
在svg文件中：
- add
<?xml version="1.0" encoding="utf-8" standalone="no"?> - add
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> - remove
height&widthproperties - add
xmlns="http://www.w3.org/2000/svg"in thesvgmarkup
- 添加
<?xml version="1.0" encoding="utf-8" standalone="no"?> - 添加
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> - 删除
height和width属性 - 添加
xmlns="http://www.w3.org/2000/svg"的svg标记
In the htmlfile :
在html文件中：
- use an
imgelement instead ofobject:<img src="..." style="width:95%;height:60%" />
- 使用
img元素而不是object：<img src="..." style="width:95%;height:60%" />
回答by Simon East
I had a similar issue and in my case it was because IE requires the viewBoxattribute to be specified within the SVG for scaling to work correctly, and it was missing from my SVG.
我有一个类似的问题，在我的情况下，这是因为 IE 需要viewBox在 SVG 中指定属性才能正常工作，而我的 SVG 中缺少它。
I changed:
我变了：
<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024">
to:
到：
<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024" viewBox="0 0 767 1024">
The viewBox attribute specifies <x-origin> <y-origin> <width> <height>.
viewBox 属性指定<x-origin> <y-origin> <width> <height>.
This article helped me understand the reasons for this: How to scale SVG[css-tricks.com].
这篇文章帮助我理解了这样做的原因：How to scale SVG[css-tricks.com]。
