當我開始做「帽子與烏龜」時，我需要計算每一個下落的拼板的端點坐標。後來我想，如果svg能重覆使用某個圖形就好了。
想不到svg真的有這個功能，它就是<use>，只需要href引用某個元素的id，就可以重覆使用該元素。
如果初始圖形不顯示，可以寫在defs中：
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="5" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>
xlink:href與href的區別是，xlink可以引用svg以外的元素，而一般我們會把它所要重覆使用的圖形寫在svg裏，所以僅使用href就足夠了。
另外有人會推薦將<use>與<symbol>配合使用，不過我認為symbol除了包含自己的viewbox之外沒啥特別的，因此一般用不到。