svg的使用：defs, use, symbol元素

defs, use

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。
在<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。如下面的代码所示：

<svg xmlns="http://www.w3.org/2000/svg">  
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>
 
  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" /> 
</svg>   

symbol

SVG <symbol>元素用于定义可重复使用的符号。嵌入在<symbol>元素中的图形是不会被直接显示的，除非你使用<use>元素来引用它。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
    </symbol>
 
    <use xlink:href="#shape2" x="50" y="25" />
</svg>