学习 SVG（四）—— 复用图形

在复杂的图形中，经常可以看见重复的图形。在 SVG 中确实也存在着可以为我们实现复用图形的元素。

use 元素

use 元素可以简单的利用它的 xlink:href 属性声明引用的图形。比如我们要引用一个 id 为 picture 的图形，可以这么写：

<g id="picture">
  ...
</g>
<use xlink:href="#picture" x="0" y="0" />

除了直接引用同一个文件中的元素，use 元素还可以引用外部文件中的 SVG 内容。比如我们可以将所有需要复用的元素都打包在一个文件 identity 中：

#identity.svg

<g id="logo">
  ...
</g>

<g id="banner">
  ...
</g>

<g id="mascot">
  ...
</g>

那么我们可以这样引用文件中的内容：

<use xlink:href="identity.svg#logo" x="0" y="0" />

出于安全考虑，有些浏览器并不支持外部 SVG 文件的引用，尤其是 IE。有部分浏览器也仅支持引用同域或者配置了允许跨域访问的文件。

defs 元素

如果复用的图形并非来自外部文件，我们又不想它直接显示在界面中，这时候可以使用 defs 元素将复用图形包裹其中。

<defs>
  <g id="picture">
    ...
  </g>
<defs>

被 defs 元素包裹的内容将不会显示在界面上，但它的确可以被 use 元素引用到。SVG 规范中也推荐我们将所有想要复用的对象放置在 defs 元素中，这样 SVG 阅读器可以进入流式环境中，能更高效地处理数据。

symbol 元素

symbol 元素是另一种组合元素的方式。与我们通常使用的 g 元素不同，symbol 元素永远不会显示。因此我们可以不把 symbol 放入 defs 元素中。然而我们还是习惯将它放入 defs 元素中，因为 symbol 元素也是供我们后续复用的元素。

symbol元素还有一个特点是可以和 svg 元素一样，添加 viewBox 和 preserveAspectRatio 属性以调整它的显示方式。

image 元素

image 元素也有一个 xlink:href 属性，它可以包含一个完整的 SVG 或者栅格文件。

image 元素可以设置 x、y、width、height 属性，当引用的内容与设置的高宽不匹配时，可以使用 preserveAspectRatio 属性指定内容的显示方式（包含排列方式和裁切方式）。当引用的图像中也包含有 preserveAspectRatio 属性时，可以在 image 元素的 preserveAspectRatio 属性值中添加 defer 关键字，这样会使用图像的属性来替代默认值。

marker 元素

marker 元素定义的图形不会被显示，但是和 symbol 元素一样，我们还是会将它放入 defs 元素中，因为它也会被我们复用。

<defs>
  <marker id="marker">
    ...
  </marker>
</defs>

每一个 marker 元素都是一个“独立”的图形，所以必须给它设置 markerWidth 和 markerHeight。

不同于 use 元素，引用 marker 元素的 path 元素使用的是声明样式的方式。

<path d="..." style="marker: url(#marker)" />

我们也可以简单的将它写入 CSS 文件或者 style 标签中：

path {marker: url(#marker)}

引用了 marker 后，路径上的每一个节点都会被添加引用的 marker 的内容。我们可以使用 marker-start，marker-mid 和 marker-end 区分路径中的节点以使不同的节点使用不同的 marker 元素。

由于路径带有方向，我们可以为 marker 元素设置 orient=“auto”。设置后的 marker 元素的内容会在路径中跟随路径的方向旋转。

参考：

《精通SVG》

YIXUNFE / blog