CODEWITHSUNDEEP
firefoxsvg
hide0
hide0

Reputation: 424

Inline SVG with transforms not visible in Firefox, works fine in Chrome

I have this code in a PHP script, being served up from Apache.

<?php
header('Content-type: application/xhtml+xml');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG in text/html</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <g width="100%" height="100%" transform="matrix(1, 0, 0,1,683,285)" buffered-rendering="dynamic">
   <line y2="208" x2="85" y1="10" x1="24" stroke="#999"></line></g></svg>

</body>
</html>

The script works fine in Chrome (draws a straight line on screen). Firefox (18.0.2), however, does not seem to render it at all. I just see a blank white screen.

I've been racking my brains trying to figure this one out, but for the life of me I can't understand why this should happen. Any ideas? I've scoured through all the stackexchange posts on the topic, and none of them helped in my case

Edit: I forgot to mention: it works fine as soon as I remove the 'transform=...' attribute, but I need that for what I'm planning.

Upvotes: 1

Views: 1919

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You don't have any widths or heights specified so the SVG is 300 x 150 pixels (Chrome gets this wrong) and the html and body don't extend either. This seems more like what you want. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%">
<head>
<title>SVG in text/html</title>
</head>
<body style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
   <g width="100%" height="100%" transform="matrix(1, 0, 0,1,683,285)" buffered-rendering="dynamic">
   <line y2="208" x2="85" y1="10" x1="24" stroke="#999"></line></g></svg>

</body>
</html>

Upvotes: 2

Related Questions