SVG feOffset Filter

by Online Tutorials Library July 14, 2022

SVG <feoffset> Filter

SVG <feOffset> element is used to show the drop shadow effect. To show this effect, take an SVG graphic and move it a little bit in the x-y plane.

Example

  <!DOCTYPE html>  <html>  <body>  <h2> Drop shadow effect </h2>    <svg height=”250″ width=”250″>  <defs>  <filter id=”p1″ x=”0″ y=”0″ width=”200%” height=”200%”>  <feOffset result=”offOut” in=”SourceGraphic” dx=”20″ dy=”20″ />  <feGaussianBlur result=”blurOut” in=”offOut” stdDeviation=”10″ />  <feBlend in=”SourceGraphic” in2=”blurOut” mode=”normal” />  </filter>  </defs>  <rect width=”90″ height=”90″ stroke=”blue” stroke-width=”3″ fill=”purple” filter=”url(#p1)” />  </svg>    </body>  </html>  </html>  

Test it Now

Explanation

The id attribute of <filter> defines a unique name for the pattern.
The filter attribute of<rect> element is used to link the element to the”p1″ filter.

Next TopicSVG feTurbulence Filter

SVG feOffset Filter

SVG <feoffset> Filter

Example

Explanation

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like