SVG 未在 IE 10 中使用 Doctype HTML 4 呈现

Posted

技术标签:

【中文标题】SVG 未在 IE 10 中使用 Doctype HTML 4 呈现【英文标题】:SVG is not rendering in IE 10 with Doctype HTML 4 【发布时间】:2013-01-24 04:29:00 【问题描述】:
<%@ Page Language="C#" .. %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke- fill="red" />
</svg> 
 </body>
</html>

/*上面的代码不工作。没有得到任何输出。 如果将第二行的 Doctype 替换如下,它可以工作。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

谁能帮助我理解关键区别是什么? */

【问题讨论】:

【参考方案1】:

两件事:

    确保您的 Web 服务器使用正确的 mime 类型提供 SVG 文件:“image/svg+xml”。我在使用旧版本的 Lighttpd 时遇到了这个问题。

    您可以通过添加 X-UA-Compatible Meta 标签来覆盖 IE 的渲染模式:

这将强制 IE 进入标准模式,同时保留旧的文档类型。这不是最佳做法,但似乎适用于 IE10。

【讨论】:

【参考方案2】:

主要区别在于

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt;

使浏览器使用怪癖模式。 IE 不支持 quirks 模式下的 SVG。

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

使浏览器处于几乎标准模式。

您可以将您的 doctype 转换为一种可以非常轻松地在 IE9 中呈现 SVG 的类型,只需添加一个系统标识符,如下所示:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

我不知道这是否适用于 IE10,但如果 IE10 像它应该遵循 HTML5 doctype 解析规则,即使是上述 doctype 也会导致 quirks 模式,因此可能导致 SVG 不使成为。

HTML 4.0 在 13 年前的 1999 年被 HTML 4.01 取代为 W3C 推荐标准,因此您应该使用的绝对最小文档类型是

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

这将导致 HTML5 兼容浏览器中的 几乎标准 模式,就像您提到的 XHTML doctype 一样。但这适用于从 HTML 3.2 切换网站的人。

最好确保您的网站在标准模式下运行。您可以通过使用 HTML 4.01 严格的文档类型来做到这一点,例如

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

这是当前的 W3C 建议,但要记住的时间仍然有点长。将浏览器置于 standards 模式的最短字符串是

&lt;!DOCTYPE HTML&gt;

这就是为什么选择它用于 HTML5 和更高版本的文档。

【讨论】:

【参考方案3】:

标准的 html 5 文档类型是

&lt;!DOCTYPE html&gt;

你应该使用它。

IE 9/10 将仅显示 html 5 documents 和 xhtml 文档的 SVG。您的替代 doctype 将内容标记为 xhtml,这就是它起作用的原因。

【讨论】:

感谢您的回复。是否有任何解决方法或解决方案可以使其与 HTML 4 Doctype 一起使用。我只需要将 Doctype 设为 HTML 4。 没有。 IE9 仅在标准模式下显示 SVG,您需要 html5 文档类型才能在标准模式下获得它。我添加了指向答案的链接,即微软关于该主题的声明。 @Apparao 为什么需要 HTML4 DOCTYPE?

以上是关于SVG 未在 IE 10 中使用 Doctype HTML 4 呈现的主要内容,如果未能解决你的问题,请参考以下文章

带有内部图像的 Svg 未在 Safari 中显示

SVG raw 未在颤动中显示文本

SVG 内联 CSS 未在 Internet Explorer 中显示

hashchange 事件未在 IE10 和 IE11 中触发,具有 history.pushState 和 url 手动操作的组合

使用 iText 将 SVG 转换为 PDF,SVG 未在 PDF 中完全显示

IE10 和 11 中缩放 SVG 的奇怪边距