<pattern>

使用語境

屬性

height

此屬性確定圖案塊的高度。值型別：<length>；預設值：0；可動畫：是

href

此屬性引用一個模板圖案，該模板圖案為 <pattern> 屬性提供預設值。值型別：<URL>；預設值：無；可動畫：是

圖案內容單位

此屬性定義 <pattern> 內容的座標系統。值型別：userSpaceOnUse | objectBoundingBox；預設值：userSpaceOnUse；可動畫：是

注意： 如果在 <pattern> 元素上指定了 viewBox 屬性，則此屬性無效。

圖案變換

此屬性包含從圖案座標系統到目標座標系統的可選附加變換的定義。值型別：<transform-list>；預設值：身份變換；可動畫：是

圖案單位

此屬性定義 x、y、width 和 height 屬性的座標系統。值型別：userSpaceOnUse | objectBoundingBox；預設值：objectBoundingBox；可動畫：是

保持長寬比

此屬性定義如果 SVG 片段嵌入到具有不同 縱橫比 的容器中時，SVG 片段必須如何變形。值型別：(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?；預設值：xMidYMid meet；可動畫：是

檢視框

此屬性定義圖案片段的 SVG 視口的邊界。值型別：<list-of-numbers>；預設值：無；可動畫：是

width

此屬性確定圖案塊的寬度。值型別：<length>；預設值：0；可動畫：是

x

此屬性確定圖案塊的 x 座標偏移量。值型別：<length>；預設值：0；可動畫：是

xlink:href 已棄用

此屬性引用一個模板圖案，該模板圖案為 <pattern> 屬性提供預設值。值型別：<URL>；預設值：無；可動畫：是

注意： 對於實現 href 的瀏覽器，如果同時設定了 href 和 xlink:href，則將忽略 xlink:href，僅使用 href。

y

此屬性確定圖案塊的 y 座標偏移量。值型別：<length>；預設值：0；可動畫：是

DOM 介面

此元素實現了 SVGPatternElement 介面。

示例

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

<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>

規範

瀏覽器相容性