内联SVG打破HTML页面

时间:2015-03-04 17:34:43

标签: html google-chrome firefox svg

我刚尝试使用内嵌SVG(由phpqrcode创建)渲染QR码。删除自动生成的doctype后,我尝试查看该页面。

它被打破了:

Firefox Screenshot

您在图片上看到的Register应该在标题中。

我也尝试过Chrome,但没有区别。

我认为问题是代码或某种语法错误。

我使用的代码正好是下面的代码。

我在Gentoo GNU / Linux上使用Firefox 36.0。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Register</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="87" height="87" viewBox="0 0 87 87">
<desc></desc>
<rect width="87" height="87" fill="#ffffff" cx="0" cy="0" />
<defs>
    <rect id="p" width="3" height="3" />
</defs>
<g fill="#000000">
    <use x="12" y="12" xlink:href="#p" />
    <use x="15" y="12" xlink:href="#p" />
    <use x="18" y="12" xlink:href="#p" />
    <use x="21" y="12" xlink:href="#p" />
    <use x="24" y="12" xlink:href="#p" />
    <use x="27" y="12" xlink:href="#p" />
    <use x="30" y="12" xlink:href="#p" />
    <use x="36" y="12" xlink:href="#p" />
    <use x="39" y="12" xlink:href="#p" />
    <use x="42" y="12" xlink:href="#p" />
    <use x="45" y="12" xlink:href="#p" />
    <use x="48" y="12" xlink:href="#p" />
    <use x="54" y="12" xlink:href="#p" />
    <use x="57" y="12" xlink:href="#p" />
    <use x="60" y="12" xlink:href="#p" />
    <use x="63" y="12" xlink:href="#p" />
    <use x="66" y="12" xlink:href="#p" />
    <use x="69" y="12" xlink:href="#p" />
    <use x="72" y="12" xlink:href="#p" />
    <use x="12" y="15" xlink:href="#p" />
    <use x="30" y="15" xlink:href="#p" />
    <use x="36" y="15" xlink:href="#p" />
    <use x="42" y="15" xlink:href="#p" />
    <use x="48" y="15" xlink:href="#p" />
    <use x="54" y="15" xlink:href="#p" />
    <use x="72" y="15" xlink:href="#p" />
    <use x="12" y="18" xlink:href="#p" />
    <use x="18" y="18" xlink:href="#p" />
    <use x="21" y="18" xlink:href="#p" />
    <use x="24" y="18" xlink:href="#p" />
    <use x="30" y="18" xlink:href="#p" />
    <use x="36" y="18" xlink:href="#p" />
    <use x="54" y="18" xlink:href="#p" />
    <use x="60" y="18" xlink:href="#p" />
    <use x="63" y="18" xlink:href="#p" />
    <use x="66" y="18" xlink:href="#p" />
    <use x="72" y="18" xlink:href="#p" />
    <use x="12" y="21" xlink:href="#p" />
    <use x="18" y="21" xlink:href="#p" />
    <use x="21" y="21" xlink:href="#p" />
    <use x="24" y="21" xlink:href="#p" />
    <use x="30" y="21" xlink:href="#p" />
    <use x="36" y="21" xlink:href="#p" />
    <use x="39" y="21" xlink:href="#p" />
    <use x="42" y="21" xlink:href="#p" />
    <use x="45" y="21" xlink:href="#p" />
    <use x="54" y="21" xlink:href="#p" />
    <use x="60" y="21" xlink:href="#p" />
    <use x="63" y="21" xlink:href="#p" />
    <use x="66" y="21" xlink:href="#p" />
    <use x="72" y="21" xlink:href="#p" />
    <use x="12" y="24" xlink:href="#p" />
    <use x="18" y="24" xlink:href="#p" />
    <use x="21" y="24" xlink:href="#p" />
    <use x="24" y="24" xlink:href="#p" />
    <use x="30" y="24" xlink:href="#p" />
    <use x="48" y="24" xlink:href="#p" />
    <use x="54" y="24" xlink:href="#p" />
    <use x="60" y="24" xlink:href="#p" />
    <use x="63" y="24" xlink:href="#p" />
    <use x="66" y="24" xlink:href="#p" />
    <use x="72" y="24" xlink:href="#p" />
    <use x="12" y="27" xlink:href="#p" />
    <use x="30" y="27" xlink:href="#p" />
    <use x="36" y="27" xlink:href="#p" />
    <use x="39" y="27" xlink:href="#p" />
    <use x="45" y="27" xlink:href="#p" />
    <use x="54" y="27" xlink:href="#p" />
    <use x="72" y="27" xlink:href="#p" />
    <use x="12" y="30" xlink:href="#p" />
    <use x="15" y="30" xlink:href="#p" />
    <use x="18" y="30" xlink:href="#p" />
    <use x="21" y="30" xlink:href="#p" />
    <use x="24" y="30" xlink:href="#p" />
    <use x="27" y="30" xlink:href="#p" />
    <use x="30" y="30" xlink:href="#p" />
    <use x="36" y="30" xlink:href="#p" />
    <use x="42" y="30" xlink:href="#p" />
    <use x="48" y="30" xlink:href="#p" />
    <use x="54" y="30" xlink:href="#p" />
    <use x="57" y="30" xlink:href="#p" />
    <use x="60" y="30" xlink:href="#p" />
    <use x="63" y="30" xlink:href="#p" />
    <use x="66" y="30" xlink:href="#p" />
    <use x="69" y="30" xlink:href="#p" />
    <use x="72" y="30" xlink:href="#p" />
    <use x="39" y="33" xlink:href="#p" />
    <use x="42" y="33" xlink:href="#p" />
    <use x="45" y="33" xlink:href="#p" />
    <use x="48" y="33" xlink:href="#p" />
    <use x="12" y="36" xlink:href="#p" />
    <use x="15" y="36" xlink:href="#p" />
    <use x="24" y="36" xlink:href="#p" />
    <use x="27" y="36" xlink:href="#p" />
    <use x="30" y="36" xlink:href="#p" />
    <use x="39" y="36" xlink:href="#p" />
    <use x="45" y="36" xlink:href="#p" />
    <use x="57" y="36" xlink:href="#p" />
    <use x="63" y="36" xlink:href="#p" />
    <use x="66" y="36" xlink:href="#p" />
    <use x="69" y="36" xlink:href="#p" />
    <use x="72" y="36" xlink:href="#p" />
    <use x="18" y="39" xlink:href="#p" />
    <use x="21" y="39" xlink:href="#p" />
    <use x="33" y="39" xlink:href="#p" />
    <use x="39" y="39" xlink:href="#p" />
    <use x="45" y="39" xlink:href="#p" />
    <use x="48" y="39" xlink:href="#p" />
    <use x="54" y="39" xlink:href="#p" />
    <use x="57" y="39" xlink:href="#p" />
    <use x="60" y="39" xlink:href="#p" />
    <use x="66" y="39" xlink:href="#p" />
    <use x="12" y="42" xlink:href="#p" />
    <use x="15" y="42" xlink:href="#p" />
    <use x="18" y="42" xlink:href="#p" />
    <use x="30" y="42" xlink:href="#p" />
    <use x="39" y="42" xlink:href="#p" />
    <use x="42" y="42" xlink:href="#p" />
    <use x="45" y="42" xlink:href="#p" />
    <use x="60" y="42" xlink:href="#p" />
    <use x="63" y="42" xlink:href="#p" />
    <use x="66" y="42" xlink:href="#p" />
    <use x="69" y="42" xlink:href="#p" />
    <use x="15" y="45" xlink:href="#p" />
    <use x="18" y="45" xlink:href="#p" />
    <use x="24" y="45" xlink:href="#p" />
    <use x="33" y="45" xlink:href="#p" />
    <use x="36" y="45" xlink:href="#p" />
    <use x="42" y="45" xlink:href="#p" />
    <use x="51" y="45" xlink:href="#p" />
    <use x="57" y="45" xlink:href="#p" />
    <use x="69" y="45" xlink:href="#p" />
    <use x="15" y="48" xlink:href="#p" />
    <use x="21" y="48" xlink:href="#p" />
    <use x="24" y="48" xlink:href="#p" />
    <use x="27" y="48" xlink:href="#p" />
    <use x="30" y="48" xlink:href="#p" />
    <use x="36" y="48" xlink:href="#p" />
    <use x="39" y="48" xlink:href="#p" />
    <use x="42" y="48" xlink:href="#p" />
    <use x="48" y="48" xlink:href="#p" />
    <use x="57" y="48" xlink:href="#p" />
    <use x="60" y="48" xlink:href="#p" />
    <use x="69" y="48" xlink:href="#p" />
    <use x="72" y="48" xlink:href="#p" />
    <use x="36" y="51" xlink:href="#p" />
    <use x="48" y="51" xlink:href="#p" />
    <use x="51" y="51" xlink:href="#p" />
    <use x="54" y="51" xlink:href="#p" />
    <use x="60" y="51" xlink:href="#p" />
    <use x="63" y="51" xlink:href="#p" />
    <use x="66" y="51" xlink:href="#p" />
    <use x="69" y="51" xlink:href="#p" />
    <use x="12" y="54" xlink:href="#p" />
    <use x="15" y="54" xlink:href="#p" />
    <use x="18" y="54" xlink:href="#p" />
    <use x="21" y="54" xlink:href="#p" />
    <use x="24" y="54" xlink:href="#p" />
    <use x="27" y="54" xlink:href="#p" />
    <use x="30" y="54" xlink:href="#p" />
    <use x="42" y="54" xlink:href="#p" />
    <use x="48" y="54" xlink:href="#p" />
    <use x="51" y="54" xlink:href="#p" />
    <use x="54" y="54" xlink:href="#p" />
    <use x="60" y="54" xlink:href="#p" />
    <use x="66" y="54" xlink:href="#p" />
    <use x="69" y="54" xlink:href="#p" />
    <use x="12" y="57" xlink:href="#p" />
    <use x="30" y="57" xlink:href="#p" />
    <use x="36" y="57" xlink:href="#p" />
    <use x="45" y="57" xlink:href="#p" />
    <use x="48" y="57" xlink:href="#p" />
    <use x="60" y="57" xlink:href="#p" />
    <use x="69" y="57" xlink:href="#p" />
    <use x="12" y="60" xlink:href="#p" />
    <use x="18" y="60" xlink:href="#p" />
    <use x="21" y="60" xlink:href="#p" />
    <use x="24" y="60" xlink:href="#p" />
    <use x="30" y="60" xlink:href="#p" />
    <use x="36" y="60" xlink:href="#p" />
    <use x="39" y="60" xlink:href="#p" />
    <use x="45" y="60" xlink:href="#p" />
    <use x="51" y="60" xlink:href="#p" />
    <use x="54" y="60" xlink:href="#p" />
    <use x="57" y="60" xlink:href="#p" />
    <use x="63" y="60" xlink:href="#p" />
    <use x="69" y="60" xlink:href="#p" />
    <use x="12" y="63" xlink:href="#p" />
    <use x="18" y="63" xlink:href="#p" />
    <use x="21" y="63" xlink:href="#p" />
    <use x="24" y="63" xlink:href="#p" />
    <use x="30" y="63" xlink:href="#p" />
    <use x="39" y="63" xlink:href="#p" />
    <use x="42" y="63" xlink:href="#p" />
    <use x="45" y="63" xlink:href="#p" />
    <use x="48" y="63" xlink:href="#p" />
    <use x="60" y="63" xlink:href="#p" />
    <use x="63" y="63" xlink:href="#p" />
    <use x="66" y="63" xlink:href="#p" />
    <use x="69" y="63" xlink:href="#p" />
    <use x="72" y="63" xlink:href="#p" />
    <use x="12" y="66" xlink:href="#p" />
    <use x="18" y="66" xlink:href="#p" />
    <use x="21" y="66" xlink:href="#p" />
    <use x="24" y="66" xlink:href="#p" />
    <use x="30" y="66" xlink:href="#p" />
    <use x="39" y="66" xlink:href="#p" />
    <use x="42" y="66" xlink:href="#p" />
    <use x="45" y="66" xlink:href="#p" />
    <use x="54" y="66" xlink:href="#p" />
    <use x="60" y="66" xlink:href="#p" />
    <use x="12" y="69" xlink:href="#p" />
    <use x="30" y="69" xlink:href="#p" />
    <use x="36" y="69" xlink:href="#p" />
    <use x="39" y="69" xlink:href="#p" />
    <use x="42" y="69" xlink:href="#p" />
    <use x="51" y="69" xlink:href="#p" />
    <use x="54" y="69" xlink:href="#p" />
    <use x="60" y="69" xlink:href="#p" />
    <use x="12" y="72" xlink:href="#p" />
    <use x="15" y="72" xlink:href="#p" />
    <use x="18" y="72" xlink:href="#p" />
    <use x="21" y="72" xlink:href="#p" />
    <use x="24" y="72" xlink:href="#p" />
    <use x="27" y="72" xlink:href="#p" />
    <use x="30" y="72" xlink:href="#p" />
    <use x="36" y="72" xlink:href="#p" />
    <use x="42" y="72" xlink:href="#p" />
    <use x="48" y="72" xlink:href="#p" />
    <use x="51" y="72" xlink:href="#p" />
    <use x="54" y="72" xlink:href="#p" />
    <use x="57" y="72" xlink:href="#p" />
    <use x="60" y="72" xlink:href="#p" />
    <use x="72" y="72" xlink:href="#p" />
</g>
</svg>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我修好了。

问题是PHP在第145行的qrvect.php中设置的header。 内容类型不再是HTML,因此Firefox尝试将文件解析为SVG。

非常感谢你的帮助!