Question

我在PHP脚本中有这个代码，由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>

该脚本在Chrome中运行良好（在屏幕上绘制一条直线）。然而，Firefox（18.0.2）似乎根本不呈现它。我只是看到一个空白的白色屏幕。

我一直绞尽脑汁试图弄清楚这一点，但对于我的生活，我无法理解为什么会发生这种情况。有任何想法吗？我已经浏览了关于该主题的所有stackexchange帖子，并且在我的案例中没有一个帮助

编辑：我忘了提到：一旦我删除'transform = ...'属性，它就可以正常工作，但我需要那个我正在计划的内容。

Answer 1

您没有指定任何宽度或高度，因此SVG为300 x 150像素（Chrome错误）并且html和正文也不会延伸。这似乎更像你想要的。

<!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>

内联SVG，在Firefox中无法看到变换，在Chrome中运行良好

1 个答案: