Skip to content
Related Articles

Related Articles

SVG <feOffset>
  • Last Updated : 17 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

The SVG feOffset element is used to create drop shadow effects. To create drop shadow take an SVG graphic (image or element) and move the XY coordinates.

Syntax:

<feDropShadow dx="" dy="" stdDeviation=""/>

Attributes:

  • dx: defines x offset
  • dy: defines y offset
  • stdDeviation: defines standard deviation for the blur operation.

Example:




<html>
   <title>SVG Filter</title>
   <body>
        
      <svg width="400" height="400">
        
         <defs>
            <filter id="filter2" x="0" y="0"
                    width="150%" height="150%">
               <feOffset result="offOut" dx="30" dy="30" />
               <feGaussianBlur result="blurOut" in="offOut" 
                               stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
           
         <g>
            <rect x="50" y="50" width="150" height="150"
            fill="gray" filter="url(#filter2)" />
         </g>
           
      </svg>
     
   </body>
</html>

Output:



Example: Shadow without blur.




<html>
<title>SVG Filter</title>
<body>
      
    <svg width="400" height="400">
      
        <defs>
            <filter id="filter2" x="0" y="0" width="150%" height="150%">
            <feOffset result="offOut" dx="30" dy="30" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
        </defs>
          
        <g>
            <rect x="50" y="50" width="150" height="150"
            stroke="black" stroke-width="5"
            fill="gray" filter="url(#filter2)" />
        </g>
          
    </svg>
      
</body>
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :