如何使用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文檔

回答

相關問題