Open In App

SVG <feDisplacementMap> Element

Improve
Improve
Like Article
Like
Save
Share
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <feDisplacementMap> SVG filter primitive is use to spatially displace the image content using a displacement map. It takes two inputs to produce one result. The image content to displace is specified in the “in2” attribute. The content to which displacement effect is applied is reserved in “in” attribute.

Syntax:

<feDisplacementMap in2="" in="" scale="" 
    xChannelSelector="" yChannelSelector=""/>

Attributes:

  • in – It identifies input for the given filter primitive.
  • in2 – It identifies the second input for the given filter primitive. It works exactly like the in attribute.
  • scale – It defines the displacement scale factor to be used on a <feDisplacementMap> filter primitive.
  • xChannelSelector -It indicates which color channel from in2 to used to displace the pixels in ‘in’ along the x-axis.
  • yChannelSelector – Itindicates which color channel from in2 to used to displace the pixels in ‘in’ along the y-axis.

Example 1:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200" 
        viewBox="0 0 220 220">
  
        <filter id="displacementFilter">
  
            <feTurbulence type="turbulence" 
                baseFrequency="1" 
                numOctaves="2" 
                result="turbulence" />
  
            <feDisplacementMap in2="turbulence" 
                in="SourceGraphic" scale="50" 
                xChannelSelector="R"
                yChannelSelector="B" />
        </filter>
  
        <circle cx="100" cy="100" r="100" 
            stroke="green" style=
            "filter: url(#displacementFilter)" />
    </svg>
</body>
  
</html>


Output:

Example 2:




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200" 
        viewBox="0 0 220 220">
  
        <filter id="displacementFilter">
  
            <feTurbulence type="turbulence" 
                baseFrequency="5" numOctaves="2" 
                result="turbulence" />
  
            <feDisplacementMap in2="abc" 
                in="SourceGraphic" scale="200" 
                xChannelSelector="B" 
                yChannelSelector="R" />
        </filter>
  
        <rect width="250" height="250" style
        ="filter: url(#displacementFilter)" />
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads