噪声滤镜

前端教程SVG

<feTurblulence> 噪声滤镜使用柏林噪声函数来生成图形，常被用做制作人工纹理图片，如云彩和大理石。

基本语法

<filter id="displacementFilter">
    <feTurbulence type="turbulence" numOctaves="2" baseFrequency="0.05" seed="1" stitchTiles="switch" />
</filter>

• type="fractalNoise | turbulence(默认)"
  • fractalNoise 使用噪声函数
  • turbulence 使用湍流函数
• numOctaves=<integer> 倍频的次数，正整数，默认 1；此值越大，噪声效果越明显，同时性能消耗越大
• baseFrequency="num | xNum yNum" 噪声函数种的基础频率参数，非负数，默认 0
  • 如果是2个值，则第一个值为水平方向的基础频率，第二个值为垂直方向的
  • 如果是1个值，则同时为水平和垂直方向的基础频率
• seed="num" 伪随机数生成器的起始值，默认 0
• stitchTiles="stitch | noStitch(默认)" 定义了柏林噪声贴图在边界的表现行为
  • stitch 在边缘处调整水平和垂直方向的基础频率，以使得边缘处更加平滑
  • noStitch 不做调整，因此有时在图形边缘处会有明显的不连续。

示例

下面的 codepen 演示了 <feTurbulence> 的用法：

新窗口打开