开发者

SVG display bug in different browsers

On my server, I did a remote XSLT tranformation in php like this:

$command = $java . $saxon . $target2 . ' ' . $xsl2.' '.$param;

passthru($command, $result);

the $target2 is an input SVG file and $xsl2 is the stylesheet, saxon is the saxon8.jar file, and I开发者_开发百科've tested it with several broswers.

In Google Chrome, everything worked perfect, the SVG graph got shown correctly.

However, I tried to do the same thing in Firefox(which should supports SVG graph), no SVG graph got shown, but only the actual code for the SVG graph was shown. I used "viewsource" to check out the first and last few lines of the generated SVG in firefox, and it read:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> 
<!--  Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build  14948)  --> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"  
 .......
</svg>

I tried using FireBug to debug, and there is html tags and head and body tags shown, is is saying I am screwing up my SVG with HTML stuff?

I am kinda stuck here, thanks in advance for your guys' help!


The solution to this problem is to add a content type header file like:

header("Content-type: image/svg+xml");

add it to the front of the php file, and everything should work from there.


Kevin's answer works well in PHP, but it could be achieved without help of PHP already on server side before PHP interpreter kicks in.
Here as an example on Apache's httpd.conf / .htaccess, taken from HTML5BoilerPlate's Apache HTTP server boilerplate.

# ------------------------------------------------------------------------------
# | Proper MIME types for all files                                            |
# ------------------------------------------------------------------------------

# Extension may be specified w or w/o leading dot
# http://httpd.apache.org/docs/current/mod/directive-dict.html#Syntax

<IfModule mod_mime.c>
  # SVG
  #   Required for svg webfonts on iPad
  #   twitter.com/FontSquirrel/status/14855840545
  AddType image/svg+xml                       svg svgz
  AddEncoding gzip                            svgz
</IfModule>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜