[SVG] 13. svg 定義 symbol,並重覆使用

有的時候,我們會重覆的不斷繪製某一個圖形,但並不會想要每次都重寫,那就可以使用 SVG Symbol ,來定義該圖形,之後就可以透過 use 元素來反覆使用定義好的 SVG Symbol,來看個簡單的範例。

語法

使用 symbol 元素,並給定一個 id:

<symbol id="rectangle">
  <!-- 這裡就放置想要定義為 symbol 的圖形 -->
</symbol>

如上註解所述,在 symbol 元素內,放置任何想要重覆使用的圖形即可。

最後在透過 use 元素,並指定 id,就可以引用 symbol 了,如下寫法即可:

<use href="#rectangle">

範例

See the Pen svg symbol by CarlosStudio (@carlos411) on CodePen.

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of