SVG没有在野生动物园上画画
[英]SVG not drawing on safari
问题描述
Seems Safari is having some problems rendering my SVG, while other browsers does it correctly. 
似乎Safari在渲染我的SVG时遇到了一些问题，而其他浏览器正确地执行了此操作。 Any idea on what is wrong? 什么是错的？
Here is the URL: 这是URL：
http://bcndevcon.org/dev/infographic/ http://bcndevcon.org/dev/infographic/
I've seen a lot of examples using iFrame, I don't know if it has something to do with the problem. 我已经看过很多使用iFrame的例子，我不知道它是否与问题有关。
Update: Seems server is sending the wrong content type, Content-Type: text/html 更新：似乎服务器发送了错误的内容类型，Content-Type：text / html
Update 2: In order to draw it correctly on all browsers use xhtml insted of html extension, for example: index.html 更新2：为了在所有浏览器上正确绘制它，请使用html扩展名的xhtml，例如：index.html
Newbie error :) 新手错误:)
2 个解决方案
解决方案1
6 已采纳 2011-06-20 12:03:52
You have an XHTML page being served as text/html . 您有一个XHTML页面作为text/html 。 Change your server to serve your page as application/xhtml+xml , or include the following as the first element in the <head> : 更改您的服务器以将您的页面作为application/xhtml+xml ，或者将以下内容包含在<head>作为第一个元素：
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
If Safari is interpreting your XHTML page as HTML, it will not interpret SVG elements as anything other than custom markup. 如果Safari将您的XHTML页面解释为HTML，则它不会将SVG元素解释为自定义标记以外的任何内容。
For reference, here is an example of SVG in XHTML that works in Safari, including using JavaScript to create SVG elements. 作为参考，以下是在Safari中使用的XHTML中的SVG示例，包括使用JavaScript创建SVG元素。
Edit : Additionally, you have broken XHTML; 编辑 ：此外，你已经破坏了 XHTML; your <link> tag is missing a self-closing marker; 你的<link>标签缺少一个自动关闭标记; see the validation results . 查看验证结果 。
The real problem, however, is that you have a broken URI for your <script> element when referencing jQuery: 但是，真正的问题是，在引用jQuery时， <script>元素的URI已损坏：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Throw a proper "http:" at the front of that URI and you will find your page working (if you fix the other two problems). 在该URI的前面放一个正确的“http：”，你会发现你的页面正常工作（如果你解决了另外两个问题）。
解决方案2
2 2011-06-20 08:49:50
That's relying on innerHTML (via the jQuery html function ) to parse html5 correctly, which probably isn't the case for the version of Safari you're using. 这依赖于innerHTML （通过jQuery html函数 ）来正确解析html5，这可能不是你正在使用的Safari版本的情况。
If you instead used DOM Core for creating the element's it would work just fine, or alternativly to use the DOM Parser API for parsing the svg fragments. 如果您使用DOM Core来创建元素，它可以正常工作，或者可选地使用DOM Parser API来解析svg片段。 See this example . 看这个例子 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.