在Safari中显示SVG的Doctype问题 [英] Doctype problem displaying SVG with Safari
问题描述
我有几个要在页面上布局的SVG图像. Firefox和Chrome并没有给我任何问题，但是Safari仅在且仅当文档扩展名为".xhtml"时，才显示SVG图像.如果我尝试使用PHP代码(并因此使用".php"扩展名)，则在".xhtml"文档中使用的完全相同的标记将不再显示SVG图像.问题当然是，我必须为手头的项目使用PHP.有什么建议?这是源代码:
I have several SVG images I'd like to layout on a page. Firefox and Chrome have given me no issues whatsoever, but Safari only seem to display the SVG image if and only if the document has an ".xhtml" extension. If I try to use PHP code (and therefor a ".php" extension) the exact same markup I used in the ".xhtml" document will no longer display the SVG image. The problem is of course, I must use PHP for the project at hand. Any suggestions? Here's the source code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="de" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title>SVG Safari Test</title>
</head>
<body>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><circle cx="250" cy="250" r="238.048"/></svg>
</body>
</html>
推荐答案
.xhtml在Safari中起作用而.html不能在Safari中工作的原因是Safari需要将文档视为XML以允许嵌入SVG. Firefox和Chrome的最新版本使用 HTML5解析器，该嵌入器可以嵌入SVG在纯HTML文档中，因此它们应同时使用.
The reason .xhtml works in Safari and .html doesn't is that Safari needs to treat the document as XML to allow embedded SVG. The latest versions of Firefox and Chrome use a HTML5 parser which allows SVG to be embedded in plain HTML documents, so they should work with both.
要使其在Safari中正确呈现，您需要将内容类型设置为application/xhtml+xml.在输出任何内容之前，请在您的PHP文件中使用它:
To have it render properly in Safari you need to set the content type to application/xhtml+xml. Use this in your PHP file before you output any content:
<?php
header('Content-type: application/xhtml+xml');
?>
这篇关于在Safari中显示SVG的Doctype问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
