<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 上查看此页面 • 报告此内容的问题