通過使用 <pattern> 標籤，可以在 SVG 圖像內部定義可重複使用的任意圖案。這些圖案可以通過 fill 屬性或 stroke 屬性進行引用。

使用場景

例如我們要在 <svg> 中繪製大量的圓點點，可以通過重複使用 <circle> 標籤來實現。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="2" fill="black" />
  <circle cx="30" cy="10" r="2" fill="black" />
  <circle cx="50" cy="10" r="2" fill="black" />
  <circle cx="70" cy="10" r="2" fill="black" />
  <circle cx="90" cy="10" r="2" fill="black" />

  <circle cx="10" cy="30" r="2" fill="black" />
  <circle cx="30" cy="30" r="2" fill="black" />
  <circle cx="50" cy="30" r="2" fill="black" />
  <circle cx="70" cy="30" r="2" fill="black" />
  <circle cx="90" cy="30" r="2" fill="black" />

  <circle cx="10" cy="50" r="2" fill="black" />
  <circle cx="30" cy="50" r="2" fill="black" />
  <circle cx="50" cy="50" r="2" fill="black" />
  <circle cx="70" cy="50" r="2" fill="black" />
  <circle cx="90" cy="50" r="2" fill="black" />

  <circle cx="10" cy="70" r="2" fill="black" />
  <circle cx="30" cy="70" r="2" fill="black" />
  <circle cx="50" cy="70" r="2" fill="black" />
  <circle cx="70" cy="70" r="2" fill="black" />
  <circle cx="90" cy="70" r="2" fill="black" />

  <circle cx="10" cy="90" r="2" fill="black" />
  <circle cx="30" cy="90" r="2" fill="black" />
  <circle cx="50" cy="90" r="2" fill="black" />
  <circle cx="70" cy="90" r="2" fill="black" />
  <circle cx="90" cy="90" r="2" fill="black" />
</svg>

這種方法不好的地方在於，需要為每個點都創建一個 <circle> 標籤，它們除了座標不一致之外，其它屬性都是相同的，大量代碼都是冗餘的。

這種情況正好就是 <pattern> 標籤能夠大顯身手的地方。

使用方法

使用 <pattern> 標籤的基本步驟如下：

1. 在 <defs> 標籤內定義 <pattern>。
2. 通過元素的 stroke 或 fill 屬性引用定義好的圖案。

定義 <pattern> 最初看起來可能有些複雜，但實際上它僅僅是繪製一些形狀或路徑而已。你可以把它想象成一個可從外部重複引用的 <svg> 標籤。

<pattern> 可使用的一些屬性

• viewBox: 用數值列表指定圖案視口邊界，默認為 none。
• x: 以長度或百分比指定圖案的X座標，默認為 0。
• width: 指定圖案寬度，默認為 0。
• height: 指定圖案高度，默認為 0。
• href: 要重用現有圖案時，指定 id，默認為 none。
• patternContentUnits: 指定圖案座標系統，可選值為 userSpaceOnUse（SVG座標）或objectBoundingBox（相對於形狀），默認為 userSpaceOnUse。若設置了 viewBox，此屬性無效。
• patternTransform: 如需對圖案應用變換（如旋轉 rotate(45) ），在此指定，默認為 none。
• patternUnits: 指定 x、y、width、height 值所使用的座標單位，可選 userSpaceOnUse 或 objectBoundingBox，默認為 objectBoundingBox。
• preserveAspectRatio: 定義當圖案應用於具有不同長寬比的圖形時的處理方式，可選值包括 none、xMinYMin、xMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax 等，並可附加 meet（保持比例填充）或 slice（可截斷），默認為 xMidYMid meet。

我們再以上面的點狀圖案為例，使用 <pattern> 標籤重新實現一次，代碼如下：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dotPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="black" />
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#dotPattern)" />
</svg>

此時代碼看起來比上面那一版要簡潔多了，儘管座標計算稍微複雜一些，但這種方式的可讀性比上一版要好很多。

案例演示

SVG <pattern> 案例 - 創建可重複使用圖案，在線預覽

參考資料

Patterns - SVG：可縮放矢量圖形 | MDN

<pattern> – SVG: Scalable Vector Graphics | MDN