内联SVG中断HTML页面
[英]inline SVG breaks HTML page
问题描述
I just tried to render a QR Code using an inline SVG (created by phpqrcode ). 
我只是尝试使用内联SVG（由phpqrcode创建）呈现QR代码。 After removing the doctype, which is generated automatically, I tried to view the page. 删除自动生成的doctype后，我尝试查看该页面。
It was simply broken: 它只是被打破了：
The Register you can see on the picture should be in the title. 您在图片上看到的Register应该在标题中。
I also tried in Chrome but there was no difference. 我也尝试过Chrome，但没有区别。
I think the problem is the code or some kind of syntax error. 我认为问题是代码或某种语法错误。
The code I used is exactly the code below. 我使用的代码正是下面的代码。
I am using Firefox 36.0 on Gentoo GNU/Linux. 我在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 个解决方案
解决方案1
1 已采纳 2015-03-04 17:58:01
I fixed it. 我修好了它。
The problem was the header set by PHP in qrvect.php on line 145. The Content-Type was not HTML anymore, so Firefox tried to parse the file as SVG. 问题是PHP在第145行的qrvect.php中设置的header 。Content -Type不再是HTML，因此Firefox尝试将文件解析为SVG。
Thank you very much for your help! 非常感谢您的帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML内嵌svg内容放错了位置 - Html inline svg content misplaced
html2canvas 和内联 SVG - html2canvas and inline SVG
HTML <span>和svg元素不是内联的</span> - HTML <span> and svg element are not inline
IE中的HTML内联SVG边距 - HTML inline SVG margins in IE
HTML 5、内联 SVG 和 SVG DOM 的命名空间感知 - HTML 5, inline SVG, and namespace awareness for SVG DOM
html 中的垂直分页符 - Vertical Page breaks in html
HTML中的分页符 - Page breaks in HTML
缩小HTML中断页面 - Minifying html breaks page
通过“all：unset”重置CSS会中断内联SVG - CSS reset via „all: unset“ breaks inline SVG
HTML页面中的内联angularJs - Inline angularJs in html page
相关标签