13: 使用 SVG 作为图标系统 - `use` 元素

SVG 拥有一个非常酷炫且强大的元素，叫做 `<use>`。它的概念很简单。它会找到另一个 SVG 代码片段，通过 ID 引用，然后将其克隆到 `<use>` 元素内部。

最基本的用例是：我已经在页面上绘制过这个形状（或形状组），现在我想在其他地方再次绘制它。获取那个形状（或形状组），然后再次绘制它。

我们可以利用这个功能作为（隆重登场！）整个图标系统的根概念！我们可以将打算在页面中使用的所有形状放在一个大的 SVG 块中。我们将其全部包裹在一个 `<defs>` 标签中，这是一个语义化的方式，表示“我们只是在定义这些东西，以便稍后使用”。它还能确保它们不会渲染（但你应该也 `display: none;` 隐藏 `<svg>` 本身）。

它工作方式如下

<svg class="icon-basketball">
  <use xlink:href="#basketball"></use>
</svg>

那个看起来很奇怪的 `xlink:href` 属性引用了其他地方的 ID。这个 ID 可以是任何形状元素上的，例如 `<rect>` 或 `<path>`，或者它也可以是 `<g>` 之类的元素组上的 ID。

在图标系统中，它最好是 `<symbol>` 元素上的。除了在语义上正确（图标是一种符号，对吧？），`<symbol>` 元素还可以自带 `viewBox` 属性和辅助功能信息，例如 `<title>` 和 `<desc>` 标签。这使得实现变得非常容易（如上所示）。

所以你只需要确保这个定义在文档中的其他地方

<svg style="display: none;">
  <defs>
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path d="M28.1,3 ... "/>
    </symbol>
  </defs>
</svg>

查看 CodePen：JoDmd，由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。