SVG在IE 11上无法渲染

Question

我这里有一个HTML代码链接。在IE 11中无法渲染SVG图像，但是我找不到原因。

我已经尝试了另一个地方的方法：

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

我怀疑图片在这里但不可见。或者可能是大的 data= 没有被正确解释。如何检查？

- Samuel

---

检查来自PHP的响应中的内容类型 - 当前可能不正确的Content-Type：text / html...您可能需要在SVG之前放置data:image/svg+xml;，您可能需要转义所有> @lt;＃等。..不过我不确定...从未尝试过。祝你好运 - Ruskin

好的，我刚刚完成了：Content-type: image/svg+xml。现在PHP返回有效的SVG，符合W3C标准。但是在Chrome和IE上，HTML页面却无法显示图片。 - Samuel

嗯...尝试在svg之前删除文本？ - Ruskin

我可以热链接一个测试SVG文件。效果很好。<object type="image/svg+xml" data="http://samuel.levitt.fr/tactik/test.svg" style="width:75%;height:60%"></object> - Samuel

我投票关闭此问题，因为它没有包含有效的代码示例（示例链接已失效），无法解决任何与ie11相关的SVG渲染问题。此外，当前的答案中没有一个可在ie11中测试的工作片段。 - herrstrietzel

Answer 1

我曾遇到类似的问题，我的情况是因为IE要求在SVG中指定viewBox属性才能正确进行缩放，而我的SVG文件中缺少了这个属性。

我做了以下修改:

<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">

视图框（viewBox）属性指定了<x-origin> <y-origin> <width> <height>。这篇文章帮助我理解了其中的原因：如何缩放SVG [css-tricks.com]。

- Simon East

Answer 2

当我在IE11中使用xlink:href属性显示我的svg图像时，遇到了类似的问题，它只显示一个空布局而没有任何内容。SVG看起来像这样：

<svg>
   <symbol id="xxx">
     <g>
       <path>
       </path>
     <g>  
   </symbol>
</svg>

当我删除"g"标签时：

<svg>
   <symbol id="xxx">
     <path>
     </path> 
   </symbol>
</svg>

它有正确的呈现方式，我希望这个答案能够帮助其他开发者解决他们的问题。

- luq

Answer 3

我所做的使其工作的事情：

在svg文件中：

1. 添加<?xml version="1.0" encoding="utf-8" standalone="no"?>
2. 添加<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
3. 删除height和width属性
4. 在svg标记中添加xmlns="http://www.w3.org/2000/svg"

在html文件中：

5. 使用img元素代替object：<img src="..." style="width:95%;height:60%" />

- Samuel

---

这个答案并没有解决问题。尽管你提供了所有步骤，但没有Simon的回答中指定的“viewBox”属性。它仍然无法在IE11中呈现，而这是必要的。我亲自测试过。 - threeFatCat