symbol 元素

前端教程SVG

SVG 最常用的使用场景之一是 SVG Icons（矢量图标），为了让图标可以重复使用、减少代码和宽带，SVG 内置了 <symbol> 元素。

<symbol> 元素

<symbol> 和 <svg> 很类似，支持 viewBox preserveAspectRatio 属性，和 <svg> 不同之处在于： <symbol> 不会被绘制，只能被 <use> 引用

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>

  <!-- <symbol> 的实例 -->
  <use href="#myDot" x="5" y="5" fill="red" />
</svg>

示例说明

• 我们定义了 4 个 <symbol> 分别表示百度、Edge、微信、QQ图标，这些图标本身不会显示；
• 然后我们使用 4 个 <use> 通过 id 引用这些 <symbol>

小结

本节介绍了如何使用 <symbol> 来复用代码，下节我们详细讲解 SVG 的各种效果：如填充颜色、画笔颜色、渐变颜色、图案、滤镜、蒙版等。