SVG没有在野生动物园上画画

Question

似乎Safari在渲染我的SVG时遇到了一些问题,而其他浏览器正确地执行了此操作.什么是错的？

这是URL:

我已经看过很多使用iFrame的例子,我不知道它是否与问题有关.

更新:似乎服务器发送了错误的内容类型,Content-Type:text/html

在此输入图像描述

更新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中使用的XHTML中的SVG示例,包括使用JavaScript创建SVG元素.

编辑:此外,你已经打破了 XHTML; 你的<link>标签缺少一个自动关闭标记; 查看验证结果.

但是,真正的问题是,<script>在引用jQuery时,元素的URI已损坏:

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

在该URI的前面放一个正确的"http:",你会发现你的页面正常工作(如果你解决了另外两个问题).

@Xavi有趣.当我在你的网站上查看它时,它对我不起作用,但如果我在本地保存XHTML文件(以及CSS和JS文件),它在Safari中通过`file://`加载.我的假设是,这是因为您的Web服务器仍在发送`Content-Type:text/html`. (2认同)
@Xavi以下是最终证据:http://phrogz.net/tmp/xavi_infographic.xhtml服务器使用正确的mime类型发送该文件,并在Safari中加载.修复您的服务器,您的问题就会消失. (2认同)