拼接磁貼

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

stitchTiles 屬性定義了 Perlin 噪聲圖塊在邊界處的行為。

你可以將此屬性與以下 SVG 元素一起使用

<feTurbulence>

示例

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

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="noStitch" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
  </filter>

  <rect x="0" y="0" width="100" height="100" filter="url(#noise1)" />
  <rect x="100" y="0" width="100" height="100" filter="url(#noise1)" />
  <rect x="0" y="100" width="100" height="100" filter="url(#noise1)" />
  <rect x="100" y="100" width="100" height="100" filter="url(#noise1)" />

  <rect x="220" y="0" width="100" height="100" filter="url(#noise2)" />
  <rect x="320" y="0" width="100" height="100" filter="url(#noise2)" />
  <rect x="220" y="100" width="100" height="100" filter="url(#noise2)" />
  <rect x="320" y="100" width="100" height="100" filter="url(#noise2)" />
</svg>

用法說明

值	`noStitch` \| `stitch`
預設值	`noStitch`
可動畫的	是

noStitch: 此值表示不會嘗試在包含湍流函式的圖塊邊界處實現平滑過渡。有時結果會在圖塊邊界處顯示明顯的斷層。
stitch: 此值表示使用者代理將自動調整基頻的 x 和 y 值，以便 <feTurbulence> 節點的寬度和高度（即當前子區域的寬度和高度）包含圖塊寬度和高度在第一個倍頻程中的整數倍。

規範

規範
濾鏡效果模組第 1 級 # element-attrdef-feturbulence-stitchtiles

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 7 月 1 日，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題