Skip to content
Related Articles

Related Articles

Improve Article

SVG FEDisplacementMap.in2 Property

  • Last Updated : 09 Dec, 2020

The SVG FEDisplacementMap.in2 property returns the SVGAnimatedString object corresponding to the in2 component of the FEDisplacementMap element.

Syntax:

let in_prop = FEDisplacementMap.in2

Return value: This property returns the SVGAnimatedString object corresponding to the in2 component of the FEDisplacementMap element.

Example 1: 

HTML




<!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" id="gfg" />
    </filter>
  
    <rect width="250" height="250" style=
          "filter: url(#displacementFilter)" />
  
    <script type="text/javascript">
      var g = document.getElementById("gfg");
      console.log(g.in2)
      console.log("in2 value is : ",
                  g.in2.baseVal)
    </script>
  </svg>
</body>
</html>

Output:



Example 2: 

HTML




<!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"
        id="gfg" />
    </filter>
  
    <circle cx="100" cy="100" r="100"
            stroke="green" style=
            "filter: url(#displacementFilter)" />
  
    <script type="text/javascript">
      var g = document.getElementById("gfg");
      console.log(g.in2);
      console.log("in2 value is : ",
                  g.in2.baseVal)
    </script>
  </svg>
</body>
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :