SVG Drop Shadow 1
SVG <feDropShadow>
The <feDropShadow> filter is used to create
a drop shadow effect on the input graphic:
Here is the SVG code:
Example
<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1">
<feDropShadow dx="12" dy="14"
stdDeviation="1" flood-opacity="0.7"/>
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)"
/>
</svg>
Try it Yourself »
Code explanation:
- The
idattribute of the<filter>element defines a unique name for the filter - The drop shadow effect is defined with the
<feDropShadow>element - The
dxattribute defines the x offset of the drop shadow - The
dyattribute defines the y offset of the drop shadow - The
stdDeviationattribute defines the amount of the blur in the drop shadow - The
flood-opacityattribute defines the opacity of the drop shadow (from 0 to 1) - The
filterattribute of the<rect>element points the element to the "f1" filter
