Skip to content
Related Articles

Related Articles

SVG scale Attribute
  • Last Updated : 18 Nov, 2020

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" 
            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:

HTML




<!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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :