SVG feTurbulence过滤器用法示例

本文概述

<feTurbulence>元素用于用新内容填充矩形。它使你可以产生人造纹理, 以产生大理石, 云朵等效果。

它具有五个特定属性:

  • 类型
  • numOctaves
  • 种子
  • 基本频率
  • itchTiles。

类型

<feTurbulence>元素具有两个类型的值:turbulence和fractalNoise。湍流显得更加严格, 而分形噪声则显得更加模糊。类型的默认值为湍流。

例子

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".06" type="fractalNoise"/>
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T2)"/>

</svg>
</body>
</html>

立即测试

numOctaves

生成最终结果时应加在一起的噪声函数数。

其默认值为1。该数字越大表示纹理越细。

例子

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".04" numOctaves="1" />
</filter>
<rect x="80" y="40" height="150" width="150" filter="url(#T2)"/>

</svg>
</body>
</html>

立即测试

种子

<feTurbulence>接受一个种子值, 该值允许从实例到实例生成具有相同特征的不同场景。

其默认值为零。

例子

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".02" seed="15" />
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T2)"/>

</svg>
</body>
</html>

立即测试

基本频率

baseFrequency用于控制噪声的大小或频率。 baseFrequency的值必须大于零且小于一。

此属性有两个数字。第一个数字表示x方向的频率, 第二个数字表示y方向的频率。

例子

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T1">
<feTurbulence baseFrequency=".06"/>
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T1)"/>

</svg>
</body>
</html>

立即测试

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?