Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
488 views
in Technique[技术] by (71.8m points)

php - Doctype problem displaying SVG with Safari

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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');
?>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...