📌  相关文章
📜  SVG<feTurbulence>元素(1)

📅  最后修改于: 2023-12-03 15:20:24.281000             🧑  作者: Mango

SVG 元素介绍

SVG 元素是用于创建噪声纹理图案的滤镜元素。它可以用于创建各种视觉效果，如云彩、纹理、烟雾、海浪等。

语法
<filter>
  <feTurbulence 
    baseFrequency="num1 num2"
    type="fractalNoise|turbulence"
    numOctaves="val"
    seed="val"
    stitchTiles="noStitch|stitch"
  />
</filter>
  • baseFrequency属性定义噪声函数的基础频率，可设置两个值，第一个值表示水平方向上的频率，第二个值表示垂直方向上的频率。默认值为"0.01 0.01"。
  • type属性定义噪声类型，可选的值包括fractalNoise和turbulence，默认值为turbulence。
  • numOctaves属性定义噪声函数的数量，默认值为1。数量越多，图案越复杂。
  • seed属性定义随机数种子，用于生成一系列随机数。
  • stitchTiles属性定义当图案超出边界时是否平铺，可选的值包括noStitch和stitch，默认值为noStitch。
示例

下面是一个例子，创建一个有趣的云彩效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SVG feTurbulence Example</title>
</head>
<body>
  <svg width="300" height="200">
    <filter id="clouds">
      <feTurbulence 
        baseFrequency="0.05 0.05"
        type="fractalNoise"
        numOctaves="3"
        seed="0"
      />
      <feColorMatrix 
        type="matrix"
        values="0 0 0 0.3 0
                0 0 0 0.5 0
                0 0 0 1 0
                0 0 0 0 1"
      />
    </filter>
    <rect x="0" y="0" width="300" height="200" fill="white"/>
    <rect x="0" y="0" width="300" height="200" filter="url(#clouds)"/>
  </svg>
</body>
</html>

效果如下：

clouds

总结

SVG 元素是一个有趣而实用的元素，可以用于创建各种视觉效果。需要注意的是，噪声函数的复杂度会影响性能，不应设置过高的值。