stitchTiles

**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" style="filter: url(#noise1);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(100px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(0, 100px);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise1); transform: translate(100px, 100px);" />

  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(220px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(320px, 0);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(220px, 100px);" />
  <rect
    x="0"
    y="0"
    width="100"
    height="100"
    style="filter: url(#noise2); transform: translate(320px, 100px);" />
</svg>

使用說明

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

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

規範

規範
過濾器效果模組級別 1 # element-attrdef-feturbulence-stitchtiles

瀏覽器相容性

BCD 表格僅在瀏覽器中載入