Question

似乎Safari在渲染我的SVG时遇到了一些问题，而其他浏览器正确地执行了此操作。对于什么是错的任何想法？

以下是网址：

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

更新：似乎服务器发送了错误的内容类型，内容类型：text / html

enter image description here

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

新手错误：）

Answer 1

您有一个XHTML页面作为text/html提供。更改您的服务器以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：”，你会发现你的页面有效（如果你解决了另外两个问题）。

Answer 2

这依赖于innerHTML（通过jQuery html function）来正确解析html5，这可能不是您正在使用的version of Safari的情况。

如果您使用DOM Core来创建元素，它可以正常工作，或者可选地使用DOM Parser API来解析svg片段。请参阅this example。