SVG FETurbulenceElement.numOctaves属性

SVG中的FETurbulenceElement.numOctaves属性指定了噪声函数的数量级，用于生成SVG滤镜中的一部分纹理。这个属性定义了生成复杂噪声的层数，一般越多层数则噪声越清晰，但同时也会相应的增加运算量。

语法

<feTurbulence numOctaves="整数" />

属性值

属性值为一个整数。通常这个值会被设置在1到5之间，更高的数字会产生更多的细节，但同时也会增加运算量。

示例

以下代码片段将创建一个包含噪音效果的SVG图像，并将其填充到一个矩形中：

<svg width="200" height="200" >
  <rect x="0" y="0" width="200" height="200"
    fill="url(#noise)" />
  <filter id="noise" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" baseFrequency="0.5"
      numOctaves="3" result="noise"/>
    <feColorMatrix type="saturate" values="0" />
  </filter>
</svg>

在这个例子中，feTurbulence元素的numOctaves属性设置为3，即使用3个噪声函数来生成纹理。这个滤镜将产生一种类似于烟雾或云朵的效果。

注意事项

• 对于复杂的SVG图像或动画，使用较高的numOctaves值可能会降低性能。
• numOctaves的取值范围为1到6，默认值为1。

参考链接

• MDN web docs