在 SVG 使用已經繪製好的圖形- use 標籤

標籤: SVG

在 SVG 裡可以使用 use 這個標籤直接把已繪製好的圖形複製過去,並在修改樣式,使用方式為利用 href 去指定要使用的圖形 id,就可以將圖形複製過來,範例如下:

在這邊我們使用 g 的標籤將畫好的圖形包起來,接下來設定一個 id="whiskers" 之後想要使用的話只要利用 use 這個標籤並設定 xlink:href="#whiskers" 就可以重複使用了。

 

除了像上面在複製後重新定位位置外,也可以重新賦予樣式像下面這個範例一樣改變他的顏色: