我的博客

外观

回到顶部
导航

feTurbulence

feTurbulence滤镜利用柏林噪声（Perlin Noise）函数创建了一个图像。它可以实现了人造纹理比如说云纹、大理石纹的合成。

feTurbulence有5个专有属性：

  • baseFrequency
  • numOctaves
  • seed
  • stitchTiles
  • type

baseFrequency

baseFrequency表示噪声函数的基本频率参数，默认值为0。baseFrequency频率越高，噪声越密集。

0.01

numOctaves

numOctaves噪声函数的倍频，为正整数，默认值是1。倍频越大，噪声越自然，但这并不代表numOctaves越大越好，当numOctaves大于3时，效果就不太明显了

1

seed

seed属性代表了feTurbulence中生成的伪随机数的开始数字。该属性会改变噪声的形状和位置。

1

stitchTiles

stitchTiles属性定义边界处的行为表现。

属性值：

  • noStitch：默认值。不处理边界处的噪声。当多个噪声拼接在一起时，会有明显的边界。
  • stitch：处理边界处的噪声。当多个噪声拼接在一起时，边界处会更加自然。如下面这个例子。
stitchnoStitch
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);" />
  <text x="5" y ="15">stitch</text>
  
  <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);" />
  <text x="225" y ="15">noStitch</text>
</svg>

type

<feTurbulence>中的type决定应以噪声函数还是湍流函数执行过滤。

  • fractalNoise：噪声函数
  • turbulence：默认值，湍流函数
turbulencefractalNoise
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise6" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" type="turbulence" />
  </filter>
  <filter id="noise7" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" type="fractalNoise" />
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter: url(#noise6);" />
  <text x="5" y ="15">turbulence</text>

  <rect x="0" y="0" width="200" height="200" style="filter: url(#noise7); transform: translate(220px, 0);" />
  <text x="225" y ="15">fractalNoise</text>
</svg>

综合示例

0.01
1
1