HTML 使用copy-of和document()将SVG添加到XHTML输出

在本文中，我们将介绍如何使用copy-of和document()将SVG（可缩放矢量图形）添加到XHTML（可扩展超文本标记语言）输出。SVG是一种使用XML（可扩展标记语言）描述二维矢量图形的格式，而XHTML是一种规范，用于定义Web上的内容和结构。

阅读更多：HTML 教程

什么是copy-of和document()？

在了解如何使用copy-of和document()将SVG添加到XHTML之前，让我们先来了解一下这两个概念。

copy-of是XSLT（可扩展样式表语言转换）的一个元素，用于将XML文档的一部分复制到输出文档中。它可以用于复制一个或多个节点，以及它们的子节点。copy-of元素的语法如下所示：

<xsl:copy-of select="XPath表达式" />

XPath表达式用于选择要复制的节点。

document()是一个内置函数，用于在XSLT中引用外部XML文档。它可以读取和处理不在当前文档中的XML文档。document()函数的语法如下所示：

document('文档URI')

文档URI指定要引用的外部XML文档的路径或URL。

现在我们已经了解了copy-of和document()的概念，让我们看看如何将SVG添加到XHTML输出中。

使用copy-of和document()添加SVG到XHTML

首先，我们需要一个XSLT样式表，以将SVG添加到XHTML输出中。下面是一个简单的样式表示例：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        <title>SVG in XHTML</title>
      </head>
      <body>
        <h1>SVG in XHTML</h1>
        <xsl:copy-of select="document('svg.xml')/svg" />
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

在这个示例中，我们使用copy-of元素将外部XML文档中的svg节点复制到XHTML输出中。

svg.xml是包含SVG代码的外部XML文档。下面是一个简单的svg.xml示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="blue" />
</svg>

在这个示例中，我们定义了一个带有一个蓝色矩形的SVG图像。

要将SVG添加到XHTML输出中，我们需要调用XSLT样式表并传递输入XML文件和样式表文件的路径。可以使用各种工具和方法来执行XSLT转换，例如Java的XSLT处理器，或者在线的XSLT转换工具。

执行转换后，将生成与XHTML样式表中定义的输出类似的XHTML文档。在我们的示例中，输出将是一个带有标题和嵌入的SVG图像的XHTML文档。

<html>
  <head>
    <title>SVG in XHTML</title>
  </head>
  <body>
    <h1>SVG in XHTML</h1>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
      <rect x="50" y="50" width="200" height="100" fill="blue" />
    </svg>
  </body>
</html>

这样，我们就成功地将SVG添加到XHTML输出中。