SVG feTurbulence过滤器用法示例

本文概述

类型
numOctaves
种子
基本频率

< 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>

【SVG feTurbulence过滤器用法示例】立即测试