Для небольшого проекта по XML я пытаюсь использовать HTML5, так как он поддерживает SVG и WAI-ARIA. Я также хочу использовать таблицу стилей XSL для моего документа. Но я не могу получить действительный документ 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. Поэтому, пытаясь получить документ 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'><!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 с визуализацией SVG с использованием header('Content-Type: application: xhtml+xml');</p>
<pre><?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"><!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