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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!