在 ie9 中使用 embed 标签显示 svg

发布于 2024-10-29 01:47:09 字数 384 浏览 1 评论 0原文

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

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

现在,这在带有 Adob​​e 插件的 Firefox(即 8)中显示得很好,但是在 ie 9 中,它只是弹出一个空白框,框的左上角有一个图像图标。有人知道如何解决这个问题吗?

Hey everyone, I was just wondering whether anybody had any experience with displaying svg in ie9 using the embed tag. Below is an example of my code:

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

Right now this displays just fine in Firefox, ie 8 with the Adobe plugin, however in ie 9 it just pops up a blank box with an image icon in the top left of the box. Does anybody have any ideas how I could fix this problem?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

独孤求败 2024-11-05 01:47:09

尽管您的代码片段包含 HTML5 DocType 定义,但还有其他因素会影响 IE9 处理 HTML 的方式,例如 HTTP 响应标头(请参阅 Internet Explorer 如何在文档模式之间选择

我认为如果你强制 IE9 进入标准模式,你的 SVG 将由 IE9 渲染;要快速测试此功能,只需使用开发人员工具来控制浏览器和文档模式。

因此,如果您的嵌入式 SVG 现在显示您只需找出触发 IE9 选择错误文档模式的原因即可。

Althought your snippet includes a HTML5 DocType definition there are other factors which affect exactly how IE9 processes your HTML e.g. HTTP Response Headers (see How Internet Explorer Chooses Between Document Modes)

I think if you force IE9 into Standards mode your SVG will be rendered by IE9; to quickly test this just use the Developer Tools to control Browser and Document modes.

So, if your embdeded SVG now shows you're just left with figuring out what's triggering IE9 to select the wrong Document Mode.

盛装女皇 2024-11-05 01:47:09

我不确定您的问题是否意味着您正在尝试找出在 IE9 中显示 SVG 的任何方法,或者特别是仅使用 标记。如果您只是想要一种在 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>

如果您想测试此技术,这里有一些使用在 IE9 中使用 SVG 的示例(在我的网站上):

如果这不是您想要的,请澄清你的需求是什么。

I'm not sure if your question means that you're trying to figure out any way to display SVG in IE9, or specifically only with the <embed> tag. If you just want a way to display SVG in IE9, I recommend embedding SVG directly in XHTML5:

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

If you want to test this technique, here are some examples (on my site) using SVG that work in IE9:

If this is not what you want, please clarify what your needs are.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文