SVG Document.head 属性

SVG（Scalable Vector Graphics）是一种用于绘制矢量图形的 XML 标记语言，它可以通过 Document Object Model（DOM）进行操作和控制。在 SVG 格式中，Document.head 属性是一个表示 SVG 文件头部元素的对象。

属性介绍

Document.head 属性是 SVG 文件的顶级元素，它包含了 SVG 文件中的元数据和其他配置信息。在 SVG 文件中，使用 <metadata> 元素来定义 Document.head 的内容，例如作者、版本号、创建日期等等。除了 metadata 元素，Document.head 还包含了其他重要的元素，包括 <title> 元素和 <description> 元素。

<metadata> 元素

metadata 元素通常用于存储与图形有关的属性，例如作者、版本号、版权信息、创建日期、最后编辑日期等。metadata 元素并不会对图形本身产生任何影响，而是用于向其他人提供额外的信息。

<metadata>
  <author>John Smith</author>
  <version>1.0</version>
  <copyright>
    ©2019 John Smith. All rights reserved.
  </copyright>
</metadata>

<title> 元素

title 元素用于为 SVG 文档定义一个可读的标题，通常用于在浏览器中显示文档的名称。该元素只能出现一次，它的内容应该精简而准确。

<title>My Awesome SVG</title>

<description> 元素

description 元素用于为 SVG 文档定义一个可读的描述，通常用于在浏览器中显示文档的摘要信息。该元素只能出现一次，它的内容应该简洁明了。

<description>
  This is an awesome SVG created by John Smith.
</description

使用示例

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 200 200">
  <defs>
    <style>
      <![CDATA[
        .my-style {
          fill: #FF0000;
          stroke: #000000;
        }
      ]]>
    </style>
  </defs>
  <metadata>
    <author>John Smith</author>
    <version>1.0</version>
    <copyright>
      ©2019 John Smith. All rights reserved.
    </copyright>
  </metadata>
  <title>My Awesome SVG</title>
  <desc>
    This is an awesome SVG created by John Smith.
  </desc>
  <circle cx="100" cy="100" r="50" class="my-style"/>
</svg>

在上述示例中，我们定义了一个圆形，并通过 .my-style 类来定义其样式。此外，我们还用 <metadata> 元素定义了作者、版本号和版权信息，用 <title> 元素定义了文档标题，用 <description> 元素定义了文档描述。您可以按照此示例的方式来使用 Document.head 属性，定制属于您自己的 SVG 图形。