SVG feTurbulence 标签

简介

使用 Perlin 噪声函数(1981年Ken Perlin在他研究TRON的工作期间发明)创造出像云彩或大理石这样的人造纹理,生成的图像将填充整个滤镜原始分区。专有属性:

属性 说明
type 有2个值:fractalNoise(沙子文本)、turbulence(液体文本) 默认值turbulence
baseFrequency 控制x和y方向图案的重复
numOctaves 增加细节的层次,如果性能有影响的话,应该将其设置为一个较小的值
seed 用于决定开始的随机数字
stitchTiles 定义了Perlin 切片在边界处的行为方式。,有2个值:noStitch 和 stitch

实例

<svg width="1000" height="180" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g text-anchor="middle" font-size="10">
        <defs>
            <filter id="Turb1">
                <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
            </filter>
            <filter id="Turb2" >
                <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
            </filter>
            <filter id="Turb3" >
                <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
            </filter>
            <filter id="Turb4" >
                <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
            </filter>
            <filter id="Turb5" >
                <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
            </filter>
            <filter id="Turb6" >
                <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
            </filter>
        </defs>
        <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)"  />
        <text x="75" y="117">type=turbulence</text>
        <text x="75" y="129">baseFrequency=0.05</text>
        <text x="75" y="141">numOctaves=2</text>
        <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)"  />
        <text x="225" y="117">type=turbulence</text>
        <text x="225" y="129">baseFrequency=0.1</text>
        <text x="225" y="141">numOctaves=2</text>
        <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)"  />
        <text x="375" y="117">type=turbulence</text>
        <text x="375" y="129">baseFrequency=0.05</text>
        <text x="375" y="141">numOctaves=8</text>
        <rect x="470" y="25" width="100" height="75" filter="url(#Turb4)"  />
        <text x="520" y="117">type=fractalNoise</text>
        <text x="520" y="129">baseFrequency=0.1</text>
        <text x="520" y="141">numOctaves=4</text>
        <rect x="620" y="25" width="100" height="75" filter="url(#Turb5)"  />
        <text x="670" y="117">type=fractalNoise</text>
        <text x="670" y="129">baseFrequency=0.4</text>
        <text x="670" y="141">numOctaves=4</text>
        <rect x="770" y="25" width="100" height="75" filter="url(#Turb6)"  />
        <text x="820" y="117">type=fractalNoise</text>
        <text x="820" y="129">baseFrequency=0.1</text>
        <text x="820" y="141">numOctaves=1</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注