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

defs, use

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

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

<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>