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:
HTML
<!DOCTYPE html> < html >
< body >
< div style="color: green;
margin-left: 50px;">
< h1 >GeeksforGeeks</ h1 >
< svg viewBox = "0 0 480 100" < 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:
HTML
<!DOCTYPE html> < html >
< body >
< div style="color: green;
margin-left: 50px;">
< h1 >GeeksforGeeks</ h1 >
< svg viewBox = "0 0 480 100" < 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: