当前位置：首页 > article >正文

svg基础（八）滤镜-feTurbulence（湍流）

article 2024/9/21 5:39:51

feTurbulence：湍流滤镜

湍流滤镜，不稳定气流，能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用，能产生非常复杂的质感，利用它可以实现了人造纹理比如说云纹、大理石纹的合成。

1 属性

type：实现的滤镜的类型，可选fractalNoise 分形噪声，或者是 turbulence 湍流噪声。
- fractalNoise：分形噪声更加的平滑，它产生的噪声质感更接近云雾
- turbulence：湍流噪声
baseFrequency：表示噪声函数的基本频率的参数，频率越小，产生的图形越大，频率越大，产生的噪声越复杂其图形也越小越精细，通常的取值范围在 0.02 ~ 0.2
numOctaves：表示噪声函数的精细度，数值越高，产生的噪声更详细。默认值为1

2 示例

2.1 褶皱纸张纹理

<svg>
    <filter id='roughpaper'>
        <feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" />

        <feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='2'>
            <feDistantLight azimuth='45' elevation='60' />
        </feDiffuseLighting>
    </filter>
    <rect x="30" y="30" width="100" height="100" filter="url(#roughpaper)" />
</svg>

在这里插入图片描述

2.2 文字液化效果

<svg width="600" height="600">
        <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
            <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1" />
            <feDisplacementMap in="SourceGraphic" scale="50"></feDisplacementMap>
        </filter>
        <text x="10" y="100" font-size="100">feTurbulence</text>
        <text x="10" y="200" font-size="100" filter="url(#fractal)">feTurbulence</text>
    </svg>

在这里插入图片描述

2.3 杂波干扰效果

<div class="fe1">Button</div>


    <svg>
        <defs>
            <filter id="fe1">
                <feTurbulence id="animation" type="fractalNoise" baseFrequency="0.00001 9.9999999" numOctaves="1"
                    result="warp">
                    <animate attributeName="baseFrequency" from="0.00001 9.9999" to="0.00001 0.001" dur="2s"
                        repeatCount="indefinite" />
                </feTurbulence>
                <feOffset dx="-90" dy="-90" result="warpOffset"></feOffset>
                <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic"
                    in2="warpOffset"></feDisplacementMap>
            </filter>
        </defs>
    </svg>

.fe1 {  width: 200px;
    height: 64px;
    text-align: center;
    line-height: 64px;
    color:white;
    font-size: 30px;
    background-color: blue;
    border-radius: 20px;
    outline: 200px solid transparent;} 
.fe1:hover { filter: url(#fe1); }

在这里插入图片描述

hover:

在这里插入图片描述

2.3 云朵效果

    <svg>
        <filter id="filter">
            <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
            <feDisplacementMap in="SourceGraphic" scale="240" />
        </filter>
    </svg>
    <div></div>

div {
            width: 1px;
            height: 1px;
            filter: url(#filter);
            box-shadow: rgb(240 255 243) 80vw 11vh 34vmin 16vmin, rgb(17 203 215) 33vw 71vh 23vmin 1vmin, rgb(250 70 89) 4vw 85vh 21vmin 9vmin, rgb(198 241 231) 8vw 4vh 22vmin 12vmin, rgb(198 241 231) 89vw 11vh 31vmin 19vmin, rgb(240 255 243) 5vw 22vh 38vmin 19vmin, rgb(250 70 89) 97vw 35vh 33vmin 16vmin, rgb(250 70 89) 51vw 8vh 35vmin 14vmin, rgb(17 203 215) 75vw 57vh 40vmin 4vmin, rgb(250 70 89) 28vw 18vh 31vmin 11vmin, rgb(250 70 89) 8vw 89vh 31vmin 2vmin, rgb(17 203 215) 13vw 8vh 26vmin 19vmin, rgb(240 255 243) 98vw 12vh 35vmin 5vmin, rgb(17 203 215) 35vw 29vh 27vmin 18vmin, rgb(17 203 215) 67vw 58vh 22vmin 15vmin, rgb(198 241 231) 67vw 24vh 25vmin 7vmin, rgb(17 203 215) 76vw 52vh 22vmin 7vmin, rgb(250 70 89) 46vw 86vh 26vmin 20vmin, rgb(240 255 243) 50vw 20vh 25vmin 1vmin, rgb(250 70 89) 74vw 14vh 25vmin 16vmin, rgb(240 255 243) 31vw 100vh 29vmin 20vmin
        }