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>