使用 ie9 中的 embed 标签显示 svg答案

【问题标题】：displaying svg using the embed tag in ie9使用 ie9 中的 embed 标签显示 svg
【发布时间】：2011-04-02 22:27:23
【问题描述】：

大家好，我只是想知道是否有人有使用 embed 标签在 ie9 中显示 svg 的经验。下面是我的代码示例：

<!DOCTYPE html>
<html><head><title>Example</title></head>
<body>
<embed id="E" height="50%" width="100%" src="example.svg">
</body>
</html>

现在这在 Firefox 中显示得很好，即带有 Adobe 插件的 8，但是在 ie 9 中它只是在框的左上方弹出一个带有图像图标的空白框。有人知道如何解决这个问题吗？

【问题讨论】：

在浏览 HTML 时，IE9 使用什么文档模式？我认为帖子可能描述了问题和解决方案：stackoverflow.com/questions/6111785/…

标签： svg internet-explorer-9

【解决方案1】：

虽然您的 sn-p 包含 HTML5 DocType 定义，但还有其他因素会影响 IE9 如何处理您的 HTML，例如HTTP 响应标头（参见 How Internet Explorer Chooses Between Document Modes）

我认为如果您强制 IE9 进入标准模式，您的 SVG 将由 IE9 呈现；要快速测试，只需使用Developer Tools 来控制浏览器和文档模式。

因此，如果您的嵌入式 SVG 现在显示您只需弄清楚是什么触发了 IE9 选择错误的文档模式。

【讨论】：

【解决方案2】：

我不确定您的问题是否意味着您正在尝试找出在 IE9 中显示 SVG 的任何方法，或者特别是仅使用 <embed> 标记。如果你只是想要一种在 IE9 中显示 SVG 的方式，我建议直接在 XHTML5 中嵌入 SVG：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> 
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <title>untitled</title>
  <style type="text/css" media="screen">
    body { background:#eee; margin:1em }
    svg  { background:#fff; display:block; border:1px solid #ccc; width:100%; margin:1em -1px }
  </style>
</head><body>
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <!-- SVG content here -->
</svg>
<script type="text/javascript"><![CDATA[
  var svg   = document.getElementsByTagName('svg')[0];
  var svgNS = svg.getAttribute('xmlns');
  // Access/manipulate your SVG here
]]></script>
</body></html>

如果您想测试这种技术，这里有一些使用 SVG 的示例（在我的网站上），它们在 IE9 中工作：

如果这不是您想要的，请说明您的需求。

【讨论】：