The scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive. Only <feDisplacementMap> element is using this attribute.
Syntax:
scale = "number"
Attribute Values: The scale attribute accepts the values mentioned above and described below
- number: It is either an integer or a number with a fractional component. The default value is equal to 0.
The below examples illustrate the use of the scale attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<div style="color: green;
margin-left: 50px;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 480 100"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek1" x="-20%" y="-20%"
width="150%" height="150%">
<feTurbulence type="turbulence"
baseFrequency="0.10"
numOctaves="2"
result="turbulence" />
<feDisplacementMap in2="turbulence"
in="SourceGraphic" scale="5" />
</filter>
<polygon points="50, 9 60.5, 39.5 92.7,
40.1 67, 59.5 76.4, 90.3 50, 71.9
23.6, 90.3 32.9, 59.5 7.2, 40.1
39.4,39.5" style="filter: url(#geek1);"
fill="hsl(106,80%,50%)" />
</svg>
</div>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<div style="color: green;
margin-left: 50px;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 480 100"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek2" x="-20%" y="-20%"
width="150%" height="150%">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"
result="turbulence" />
<feDisplacementMap in2="turbulence"
in="SourceGraphic" scale="20" />
</filter>
<polygon points="50, 9 60.5, 39.5 92.7,
40.1 67, 59.5 76.4, 90.3 50, 71.9
23.6, 90.3 32.9, 59.5 7.2, 40.1
39.4, 39.5" style="filter: url(#geek2);"
fill="hsl(106,80%,50%)" />
</svg>
</div>
</body>
</html>
Output:
