<feDisplacementMap>
The <feDisplacementMap>
SVG filter primitive uses the pixel values from the image from in2
to spatially displace the image from in
.
The formula for the transformation looks like this:
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
where P(x,y)
is the input image, in
, and P'(x,y)
is the destination. XC(x,y)
and YC(x,y)
are the component values of the channel designated by xChannelSelector
and yChannelSelector
.
Usage context
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEDisplacementMapElement
interface.
Example
<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>
Specifications
Specification |
---|
Filter Effects Module Level 2 # feDisplacementMapElement |
Browser compatibility
BCD tables only load in the browser