如何使用 PHP XSLTProcessor 创建 HTML5 + SVG 文档答案

【问题标题】：How to create a HTML5 + SVG document using the PHP XSLTProcessor如何使用 PHP XSLTProcessor 创建 HTML5 + SVG 文档
【发布时间】：2011-03-01 20:56:46
【问题描述】：

对于一个关于 XML 的小项目，我尝试使用 HTML5，因为它支持 SVG 和 WAI-ARIA。我还想为我的文档使用 XSL 样式表。但是我无法获得带有嵌套 SVG 的有效 HTML5 文档。以下是我目前测试的一些版本：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output indent="yes" method="xml"/>
    <xsl:template match="/">        
        <html xmlns="http://www.w3.org/1999/xhtml">
        // content with the svg tag in the body
        </html>
    </xsl:template>
</xsl:stylesheet>

结合header('Content-Type: application/xml');，它可以工作并产生这个HTML输出：

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    // content with the svg tag in the body
</html>

但它不是 HTML5 并且没有 DOCTYPE 我在 W3 验证器上收到很多错误。因此，我尝试使用以下 XSL 获取 HTML5 文档：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output indent="yes" method="html"/>
    <xsl:template match="/">
        <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE HTML></xsl:text>        
        <html>
        // content with the svg tag in the body
        </html>
    </xsl:template>
</xsl:stylesheet>

但不幸的是，这将产生以下 HTML 输出：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        ....
    </head>
    // content with the svg tag in the body
</html>

正如您所见，它是常规的 HTML5，但与 header('Content-Type: application/xml'); 结合使用它会失败，因为元标记末尾缺少斜杠（这是自动创建的）。使用header('Content-Type: image/xhtml+svg'); 或header('Content-Type: text/html'); 不会出现XML 解析错误，但页面不会将SVG 显示为图形，而是显示为文本（没有标签）。

谁能告诉我如何避免插入元标记或如何设置一个合适的 Content-Type 以使浏览器呈现 SVG。甚至任何其他提示都可以使其正常工作。我真的很想保留 HTML5，以便能够保留 WAI-ARIA 地标角色和 HTML5 标签，如 NAV 和 FOOTER。

解决方案：

这将生成有效的 HTML5，并使用 header('Content-Type: application: xhtml+xml'); 渲染 SVG


        // 正文中带有 svg 标签的内容
        
    模板>
样式表>

您可以在此处查看现场演示：http://kau-boys.de/HTML5-SVG.php

【问题讨论】：

标签： php html svg xslt

【解决方案1】：

你写道：

但它不是 HTML5 并且没有文档类型

不正确。来自http://dev.w3.org/html5/html-author/

有两种语法可以使用：传统的 HTML 语法，以及 XHTML 语法

和

对于 XHTML，建议使用 DOCTYPE 被省略，因为它是不必要的

迄今为止，IE 中不支持 HTML5。这同样适用于 SVG（使用插件除外）。很明显IE不是你的目标浏览器。

今天我不会过多关注验证器，因为 HTML5 是工作草案。

答案：坚持使用 XML 序列化，这将为您提供对 SVG 的全面支持。

【讨论】：

感谢您指出这一点。我不知道我可以省略 HTML5 的文档类型。几分钟前我也让它运行起来了。我会在这里发布解决方案。在您链接的文档中，还有一些可能更容易使用 XSLT 创建的替代文档类型。而且我知道 IE 还不支持 SVG，但因为它只是一个项目，应该展示 HTML5 与 SVG 的可能性，这不是问题。再次感谢您的帮助。
@Kau-Boy：从编辑草稿中可以清楚地看出，没有强制性的 DOCTYPE。您甚至可以使用 XHTML1.0 DOCTYPE！我也想看看你的演示。
@Alejandro：好的，我添加了我的解决方案和一个现场演示，您可以尝试验证。
@KauBoy，（因为 user357812 不再与我们在一起：P）DOCTYPE 是 HTML 处理所必需的，因为没有 DOCTYPE 会在所有浏览器中触发怪癖模式。 XML 处理不需要它（也用于真正的 XHTML 和“XHTML5”），因为 XML 总是在标准模式下处理。

【解决方案2】：

嵌入svg有一种奇怪的方式，我用过一次。对于 src 属性，应设置一个 data:uri 64 位编码的 svg 对象。您应该以某种方式指定宽度和高度，同时添加命名空间和元数据。因此，您创建一个单独的 svg-document 并通过 embed 标签将其插入页面。另一种解决方案是等到 IE、opera、chrome、safari 和 firefox 支持 text/html 文件中的 svg。

【讨论】：

这并不能真正回答我的任何问题。将 SVG 集成到 HTML5 文档中并不是很复杂。我的问题是如何使用 XSL。