Question

对于关于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验证器上遇到很多错误。因此，尝试获取HTML5文档时，我使用了以下XSL：

<?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输出后产生thze：

<!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显示为图形而是显示为文本（不带标记）。

任何人都可以告诉我如何避免插入元标记或如何设置一个将使浏览器变为SVG的propper Content-Type。或者甚至任何其他暗示让这个工作。我真的希望保持HTML5能够使WAI-ARIA Landmark Roles成为像NAV和FOOTER这样的HTML5标签。

解：

这将生成使用header('Content-Type: application: xhtml+xml');

<?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" omit-xml-declaration="yes" />
    <xsl:template match="/">
        <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE HTML></xsl:text>
        <html xmlns="http://www.w3.org/1999/xhtml">
        // content with the svg tag in the body
        </html>
    </xsl:template>
</xsl:stylesheet>

呈现SVG的有效HTML5

您可以在此处看到实时演示：http://kau-boys.de/HTML5-SVG.php

Answer 1

您写道：

但它不是HTML5而且没有 DOCTYPE

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

有两种语法可以 used：传统的HTML语法，和 XHTML语法

和

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

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

今天我不太关注验证器，因为HTML5是一个工作草案。

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

Answer 2

有一种奇怪的方式来嵌入svg，我曾经使用过一次。对于src属性应该设置一个数据：uri 64bit编码的svg对象。不知何故，你应该指定宽度和高度，还添加命名空间和元。因此，您创建一个单独的svg文档，并通过embed标记将其插入到页面中。另一个解决方案是等到IE，opera，chrome，safari和firefox支持text / html文件中的svg。

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

2 个答案: