内联 SVG 打破 HTML 页面

【问题标题】：inline SVG breaks HTML page内联 SVG 打破 HTML 页面
【发布时间】：2015-03-04 17:34:43
【问题描述】：

我刚刚尝试使用内联 SVG（由 phpqrcode 创建）呈现 QR 码。删除自动生成的doctype后，我尝试查看页面。

它只是坏了：

您在图片上看到的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>

【问题讨论】：

  • 在 Firefox 上对我来说很好，标题显示在标签中，正如我所期望的那样，而不是在页面上。尝试安全模式和/或新的配置文件。
  • 标题中显示的意思是什么？ &lt;title&gt; 标签不会显示在您的 html 内容中，但会是页面的标题。你想制作一个网站图标吗？
  • 代码在 Chrome、FF 和 Safari 中呈现良好。一定有其他事情发生..
  • @dwreck08 源代码中的&lt;title&gt; 在正文中显示为文本。
  • @dwreck08 不，我不是在尝试制作网站图标，我正在尝试创建一个 TOTP 登录，我需要在正文中呈现二维码，而不是将其保存到文件中.

标签： html google-chrome firefox svg


【解决方案1】：

我修好了。

问题是 PHP 在第 145 行的 qrvect.php 中设置的 header。 Content-Type 不再是 HTML，因此 Firefox 尝试将文件解析为 SVG。

非常感谢您的帮助！

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2015-10-06
    • 1970-01-01
    • 1970-01-01
    • 2018-03-06
    • 1970-01-01
    • 2012-02-19
    • 1970-01-01
    • 2012-11-11
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode