内容表

• Usage context
• 属性
• DOM Interface
• 范例
• 规范
• 浏览器兼容性
• 另请参阅

<feTurbulence>

1. <feblend>
2. <fecolormatrix>
3. <fecomponenttransfer>
4. <fecomposite>
5. <feconvolvematrix>
6. <fediffuselighting>
7. <fedisplacementmap>
8. <feflood>
9. <fefunca>
10. <fefuncb>
11. <fefuncg>
12. <fefuncr>
13. <fegaussianblur>
14. <feimage>
15. <femerge>
16. <femergenode>
17. <femorphology>
18. <feoffset>
19. <fepointlight>
20. <fespecularlighting>
21. <fespotlight>
22. <fetile>
23. <feturbulence>
24. SVG 元素

    1. A
       1. <a>
       2. <altGlyph>
       3. <altGlyphDef>
       4. <altGlyphItem>
       5. <animate>
       6. <animateColor>
       7. <animateMotion>
       8. <animateTransform>
    2. B-C
       1. <circle>
       2. <clipPath>
       3. <color-profile>
       4. <cursor>
    3. D
       1. <defs>
       2. <desc>
    4. E
       1. <ellipse>
    5. F
       1. <feBlend>
       2. <feColorMatrix>
       3. <feComponentTransfer>
       4. <feComposite>
       5. <feConvolveMatrix>
       6. <feDiffuseLighting>
       7. <feDisplacementMap>
       8. <feDistantLight>
       9. <feFlood>
       10. <feFuncA>
       11. <feFuncB>
       12. <feFuncG>
       13. <feFuncR>
       14. <feGaussianBlur>
       15. <feImage>
       16. <feMerge>
       17. <feMergeNode>
       18. <feMorphology>
       19. <feOffset>
       20. <fePointLight>
       21. <feSpecularLighting>
       22. <feSpotLight>
       23. <feTile>
       24. <feTurbulence>
       25. <filter>
       26. <font>
       27. <font-face>
       28. <font-face-format>
       29. <font-face-name>
       30. <font-face-src>
       31. <font-face-uri>
       32. <foreignObject>
    6. G
       1. <g>
       2. <glyph>
       3. <glyphRef>
    7. H
       1. <hkern>
    8. I
       1. <image>
    9. J-L
       1. <line>
       2. <linearGradient>
    10. M
        1. <marker>
        2. <mask>
        3. <metadata>
        4. <missing-glyph>
        5. <mpath>
    11. N-P
        1. <path>
        2. <pattern>
        3. <polygon>
        4. <polyline>
    12. Q-R
        1. <radialGradient>
        2. <rect>
    13. S
        1. <script>
        2. <set>
        3. <stop>
        4. <style>
        5. <svg>
        6. <switch>
        7. <symbol>
    14. T
        1. <text>
        2. <textPath>
        3. <title>
        4. <tref>
        5. <tspan>
    15. U
        1. <use>
    16. V-Z
        1. <view>
        2. <vkern>

<feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function . It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.

Usage context

类别	Filter primitive element
准许内容	Any number of the following elements, in any order: <animate> , <set>

属性

全局属性

• Core attributes
• Presentation attributes
• Filter primitive attributes
• class
• style

Specific attributes

• baseFrequency
• numOctaves
• seed
• stitchTiles
• type

DOM Interface

This element implements the SVGFETurbulenceElement 接口。

范例

<svg width="200" height="200" viewBox="0 0 220 220"

xmlns



=


"

http://www.w3.org/2000/svg

"



>





<

filter


id



=


"

displacementFilter

"



>





<

feTurbulence


type



=


"

turbulence

"



baseFrequency



=


"

0.05

"



numOctaves



=


"

2

"



result



=


"

turbulence

"



/>





<

feDisplacementMap


in2



=


"

turbulence

"



in



=


"

SourceGraphic

"



scale



=


"

50

"



xChannelSelector



=


"

R

"



yChannelSelector



=


"

G

"



/>





</

filter


>





<

circle


cx



=


"

100

"



cy



=


"

100

"



r



=


"

100

"




style



=


"



filter


:



url


(

#displacementFilter

)




"




/>





</

svg


>



					

规范

规范
Filter Effects Module Level 2 (Filter Effects 2) # feTurbulenceElement

浏览器兼容性

BCD tables only load in the browser

另请参阅

• <filter>
• <animate>
• <set>
• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feFlood>
• <feGaussianBlur>
• <feImage>
• <feMerge>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>
• SVG tutorial: Filter effects

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者