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: