SVG 命名空间：了解 xmlns、xmlns:xlink 和 xmlns:svg

前端

2023-11-28 04:04:22

SVG，可缩放矢量图形，是一种基于 XML 的图像格式，它能够创建和保存矢量图形，在网页上展现出清晰锐利的图像。作为 XML 的一个方言，SVG 需要在一个命名空间内才能使用。

一、什么是命名空间

命名空间是 XML 中用来避免元素名称冲突的一种机制。当使用 SVG 时，某些元素与 HTML 元素的名称可能相同。为了避免冲突，需要在 SVG 元素上添加一个命名空间前缀，以表明这些元素属于 SVG 命名空间。

二、SVG 中的三个命名空间属性

在 SVG 中，有三个重要的命名空间属性：

xmlns：用于指定默认的命名空间。如果没有指定默认命名空间，则 SVG 元素必须显式指定其命名空间前缀。
xmlns:xlink：用于指定用于 xlink 链接的命名空间。xlink 用于在 SVG 元素之间创建链接。
xmlns:svg：用于指定 SVG 命名空间。SVG 命名空间包含所有 SVG 元素。

三、xmlns 的使用

xmlns 属性用于指定默认的命名空间。如果没有指定默认命名空间，则 SVG 元素必须显式指定其命名空间前缀。例如：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect width="50" height="50" fill="red" />
</svg>

上面的示例中，xmlns 属性指定了默认的命名空间为 "http://www.w3.org/2000/svg"。这意味着所有 SVG 元素都可以省略命名空间前缀。

四、xmlns:xlink 的使用

xmlns:xlink 属性用于指定用于 xlink 链接的命名空间。xlink 用于在 SVG 元素之间创建链接。例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
  <a xlink:href="https://www.example.com">
    <rect width="50" height="50" fill="red" />
  </a>
</svg>

上面的示例中，xmlns:xlink 属性指定了 xlink 命名空间为 "http://www.w3.org/1999/xlink"。这意味着可以在 SVG 元素中使用 xlink 属性。

五、xmlns:svg 的使用

xmlns:svg 属性用于指定 SVG 命名空间。SVG 命名空间包含所有 SVG 元素。例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="100" height="100">
  <svg:rect width="50" height="50" fill="red" />
</svg>

上面的示例中，xmlns:svg 属性指定了 SVG 命名空间为 "http://www.w3.org/2000/svg"。这意味着可以在 SVG 元素中使用 SVG 元素。