可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Seems Safari is having some problems rendering my SVG, while other browsers does it correctly. Any idea on what is wrong?

Here is the URL:

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.

Update: Seems server is sending the wrong content type, 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

Newbie error :)

回答1:

You have an XHTML page being served as text/html. Change your server to serve your page as application/xhtml+xml, or include the following as the first element in the <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.

For reference, here is an example of SVG in XHTML that works in Safari, including using JavaScript to create SVG elements.

Edit: Additionally, you have broken XHTML; your <link> tag is missing a self-closing marker; see the validation results.

The real problem, however, is that you have a broken URI for your <script> element when referencing jQuery:

<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).

回答2:

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.

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. See this example.