<pattern>

<pattern> 元素定義了一個圖形物件，該物件可以以重複的 x 和 y 座標間隔（“平鋪”）重新繪製，以覆蓋一個區域。

<pattern> 透過其他圖形元素上的 fill 和/或 stroke 屬性引用，以使用引用的圖案填充或描邊這些元素。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>

  <circle cx="50" cy="50" r="50" fill="url(#star)" />
  <circle
    cx="180"
    cy="50"
    r="40"
    fill="none"
    stroke-width="20"
    stroke="url(#star)" />
</svg>

屬性

height: 此屬性確定圖案平鋪的高度。值型別：<length>|<percentage>；預設值：0；可動畫：是
href: 此屬性引用一個模板圖案，該圖案為 <pattern> 屬性提供預設值。值型別：<URL>；預設值：無；可動畫：是
patternContentUnits: 此屬性定義了 <pattern> 內容的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：userSpaceOnUse；可動畫：是

注意：如果在 <pattern> 元素上指定了 viewBox 屬性，則此屬性無效。
patternTransform: 此屬性包含從圖案座標系到目標座標系的可選附加轉換的定義。值型別：<transform-list>；預設值：無；可動畫：是
patternUnits: 此屬性定義了屬性 x、y、width 和 height 的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：objectBoundingBox；可動畫：是
preserveAspectRatio: 此屬性定義瞭如果 SVG 片段嵌入在具有不同縱橫比的容器中，SVG 片段必須如何變形。值型別：(none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)?；預設值：xMidYMid meet；可動畫：是
viewBox: 此屬性定義了圖案片段的 SVG 視窗的邊界。值型別：<list-of-numbers>；預設值：無；可動畫：是
width: 此屬性確定圖案平鋪的寬度。值型別：<length>|<percentage>；預設值：0；可動畫：是
x: 此屬性確定圖案平鋪的 x 座標偏移。值型別：<length>|<percentage>；預設值：0；可動畫：是
xlink:href 已棄用: 此屬性引用一個模板圖案，該圖案為 <pattern> 屬性提供預設值。值型別：<URL>；預設值：無；可動畫：是

注意：對於實現 href 的瀏覽器，如果同時設定了 href 和 xlink:href，則會忽略 xlink:href，而只使用 href。
y: 此屬性確定圖案平鋪的 y 座標偏移。值型別：<length>|<percentage>；預設值：0；可動畫：是

使用環境

類別	容器元素
允許的內容	以下元素的任意數量，以任意順序動畫元素描述性元素形狀元素結構元素漸變元素 `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

規範

規範
可縮放向量圖形 (SVG) 2 # 模式

瀏覽器相容性

BCD 表格僅在瀏覽器中載入