Skip to content
Related Articles

Related Articles

Improve Article
SVG <feDisplacementMap> Element
  • Last Updated : 27 Oct, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :