वच्मि - SVG feDisplacementMap Filter

Vachmi

The <feDisplacementMap> 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 i.e. in
P'(x,y) is the outcome or the result of filtering
XC(x,y) and YC(x,y) are the component values of the channel designated by xChannelSelector and yChannelSelector.

Attributes

Attribute

Description

Identifies the input for the compositing operation

in2

The second input image to the compositing operation. This attribute can take on the same values as the ‘in’ attribute.

scale

This defines the displacement scale factor. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element.

When the value of this attribute is 0, this operation has no effect on the source image.

xChannelSelector

This attribute indicates which channel from in2 to use to displace the pixels in in along the x-axis. If attribute xChannelSelector is not specified, then the effect is as if a value of A were specified.

Possible values are
R | G | B | A

yChannelSelector

This attribute indicates which channel from in2 to use to displace the pixels in in along the y-axis. If attribute xChannelSelector is not specified, then the effect is as if a value of A were specified.

Possible values are
R | G | B | A

Here is the SVG code to draw this filter.

Original Image with no filter

Image with feDisplacementMap filter effect