<feTurbulence>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der <feTurbulence>
SVG-Filterprimitive erzeugt ein Bild mithilfe der Perlin-Turbulenzfunktion. Dies ermöglicht die Synthese künstlicher Texturen wie Wolken oder Marmor. Das resultierende Bild füllt die gesamte Subregion des Filterprimitives aus.
Wie bei anderen Filterprimitives werden Farbbestandteile standardmäßig im linearRGB
-Farbraum verarbeitet. Sie können color-interpolation-filters
verwenden, um stattdessen sRGB
zu nutzen.
Verwendungskontext
Attribute
DOM-Schnittstelle
Dieses Element implementiert die Schnittstelle SVGFETurbulenceElement
.
Beispiel
<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>
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # feTurbulenceElement |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feTurbulence | ||||||||||||
baseFrequency | ||||||||||||
numOctaves | ||||||||||||
seed | ||||||||||||
stitchTiles | ||||||||||||
type |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
Siehe auch
- SVG-Filterprimitive-Attribute, einschließlich
result
. <filter>
<animate>
<set>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
- SVG-Tutorial: Filter-Effekte