SVG 没有在 Safari 上绘图答案

【问题标题】：SVG not drawing on safariSVG 没有在 Safari 上绘图
【发布时间】：2011-09-18 07:32:58
【问题描述】：

似乎 Safari 在渲染我的 SVG 时遇到了一些问题，而其他浏览器却能正确处理。知道出了什么问题吗？

这是网址：

看过很多使用iFrame的例子，不知道是不是和问题有关。

更新：似乎服务器正在发送错误的内容类型，Content-Type: text/html

更新 2：为了在所有浏览器上正确绘制它，请使用 html 扩展的 xhtml insted，例如：index.html

新手错误:)

【问题讨论】：

【解决方案1】：

您有一个作为text/html 服务的XHTML 页面。更改您的服务器以将您的页面作为application/xhtml+xml 提供服务，或者将以下内容作为<head> 中的第一个元素：

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

如果 Safari 将您的 XHTML 页面解释为 HTML，它不会将 SVG 元素解释为自定义标记以外的任何内容。

作为参考，这里有一个在 Safari 中工作的 SVG in XHTML 示例，包括使用 JavaScript 创建 SVG 元素。

编辑：另外，您损坏了 XHTML；您的 <link> 标签缺少自动关闭标记；见validation results。

然而，真正的问题是，在引用 jQuery 时，<script> 元素的 URI 已损坏：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

在该 URI 的前面添加一个正确的“http:”，您会发现您的页面正常工作（如果您解决了其他两个问题）。

【讨论】：

@Xavi 查看编辑。我已经验证通过这些修复它可以在本地 Safari 上运行。
这不是脚本元素中损坏的 URI。这是一个完全有效的“无协议” URL：stackoverflow.com/questions/4831741/…
我验证了整个文档，但仍然无法在 Safari 版本 5.0.5 (6533.21.1) 和 IE 8.0 上运行
@Xavi 有趣。当我在您的网站上查看它时，它对我不起作用，但如果我将 XHTML 文件（以及 CSS 和 JS 文件）保存在本地，它在 Safari 中通过file:// 加载对我来说很好。我的假设是这是因为您的网络服务器仍在发送Content-Type: text/html。
@Xavi 这是最后的证明：phrogz.net/tmp/xavi_infographic.xhtml 服务器以正确的 mime 类型发送该文件并在 Safari 中为我加载。修复您的服务器，您的问题就会消失。

【解决方案2】：

这依赖于innerHTML（通过jQuery html function）正确解析html5，而您使用的version of Safari 可能并非如此。

如果您改为使用 DOM Core 来创建元素，它会工作得很好，或者使用 DOM Parser API 来解析 svg 片段。见this example。

【讨论】：