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

对于关于XML的小项目，我尝试使用HTML5，因为它具有SVG和WAI-ARIA支持。我也想为我的文档使用XSL样式表。但是我无法使用嵌套的SVG获取有效的HTML5文档。这里有一些版本我测试至今：如何使用PHP XSLTProcessor创建HTML5 + SVG文档

<?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>

但不幸的是，这将产生thze以下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');由于在meta标签（这是自动创建的）结尾处缺少斜线而导致失败。使用header('Content-Type: image/xhtml+svg');或header('Content-Type: text/html');没有XML解析错误，但该页面不会将SVG显示为图形，而是显示为文本（不带标签）。

谁能告诉我如何避免元标记插入或如何设置一个propper内容类型，将使浏览器渲染SVG。或者甚至有任何其他暗示让这个工作。我真的希望保持HTML5能够将WAI-ARIA Landmark Roles保持为像NAV和FOOTER这样的HTML5标签。

SOLUTION：

这将产生有效的HTML5与SVG使用头（ '：应用：内容类型的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>

现场演示，你可以在这里看到：http://kau-boys.de/HTML5-SVG.php

来源

2010-06-09 2ndkauboy

您写道：

但它不是HTML5和没有 DOCTYPE

事实并非如此。从http://dev.w3.org/html5/html-author/

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

而且

对于XHTML，则建议 DOCTYPE被省略，因为它不需要

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

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

答案：保持XML序列化，这将使您完全支持SVG。

来源

2010-06-10 14:44:06

感谢您的支持。我不知道我可以忽略HTML5的文档类型。我也在几分钟前运行它。我会在这里发布解决方案。在您链接的文档中，还有可能更容易使用XSLT创建的非本地文档类型。而且我知道IE目前还不支持SVG，但因为它只是一个项目，应该显示HTML5中使用SVG的可能性，这不是问题。再次感谢你的帮助。 – 2ndkauboy 2010-06-10 17:00:47

@ Kau-Boy：从编辑草案中可以明显看出，没有强制性的DOCTYPE。你甚至可以使用XHTML1.0 DOCTYPE！我也想看看你的演示。 – 2010-06-10 18:21:50

@Ajjandro：好的，我添加了我的解决方案和一个可以尝试验证的实时演示。 – 2ndkauboy 2010-06-10 18:55:23

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

来源

2010-06-10 10:51:01 Vladislav

这并不能真正回答我的任何问题。将SVG集成到HTML5文档中并不复杂。我的问题是如何用XSL做到这一点。 – 2ndkauboy 2010-06-10 11:00:52

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

回答

相关问题