<feTurbulence>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<feTurbulence> SVG 濾鏡圖元使用 Perlin 噪聲函式建立影像。它可以合成諸如雲朵或大理石之類的合成紋理。生成的影像將填充整個濾鏡圖元子區域。

與其它濾鏡圖元一樣，它預設在 linearRGB 顏色空間中處理顏色分量。您可以使用 color-interpolation-filters 屬性改為使用 sRGB。

使用語境

分類	濾鏡圖元元素
允許內容	可包含任意數量、任意順序的下列元素 `<animate>`、`<discard>`、`<set>`

屬性

DOM 介面

此元素實現了 SVGFETurbulenceElement 介面。

示例

html

<svg
  width="200"
  height="200"
  viewBox="0 0 220 220"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="turbulence" />
    <feDisplacementMap
      in2="turbulence"
      in="SourceGraphic"
      scale="50"
      xChannelSelector="R"
      yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" filter="url(#displacementFilter)" />
</svg>

規範

規範
濾鏡效果模組第 1 級 # feTurbulenceElement

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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