SVG Drop Shadow 2
SVG <feOffset>
The <feOffset>
filter is also used to create a drop shadow effects The idea
is to take an SVG graphic, and move it a little bit in the xy plane.
<feOffset> and <feBlend>
The first example offsets a rectangle (with <feOffset>
),
then blend the original on top of the offset image (with <feBlend>
):
Here is the SVG code:
Example
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" width="120" height="120">
<feOffset in="SourceGraphic" dx="20"
dy="20" />
<feBlend in="SourceGraphic" in2="offOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Try it Yourself »
Code explanation:
- The
id
attribute of the<filter>
element defines a unique name for the filter - The offset effect is defined with the
<feOffset>
element - The
in="SourceGraphic"
defines that the effect is created for the entire element - The
dx
attribute indicates the shift along the x axis - The
dy
attribute indicates the shift along the x axis - The
<feBlend>
element combines two graphics together by a certain blending mode - The
in2
attribute defines the second image to the blending operation - The
filter
attribute of the<rect>
element points the element to the "f1" filter
Blur Image with <feGaussianBlur>
Now, the offset image can be blurred (with <feGaussianBlur>
):
Here is the SVG code:
Example
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" width="120" height="120">
<feOffset in="SourceGraphic" dx="20"
dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
Try it Yourself »
Code explanation:
- The
stdDeviation
attribute of the<feGaussianBlur>
element defines the amount of the blur
Make the Shadow Black
Now, make the shadow black:
Here is the SVG code:
Example
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f3" width="120" height="120">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend
in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
Try it Yourself »
Code explanation:
- The
in
attribute of the<feOffset>
element is changed to"SourceAlpha"
which uses the Alpha channel for the blur instead of the entire RGBA pixel
Treat the Shadow as a Color Matrix
Now, treat the shadow as a color matrix with the <feColorMatrix>
element:
Here is the SVG code:
Example
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f4" width="120" height="120">
<feOffset
in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix
type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur stdDeviation="10" />
<feBlend
in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Try it Yourself »
Code explanation:
- The
<feColorMatrix>
element is used to change colors based on a transformation matrix - The
type
attribute of the<feColorMatrix>
element indicates the type of matrix operation. The keywordmatrix
indicates that a full 5x4 matrix of values will be defined - The
value
attribute of the<feColorMatrix>
element defines the values for the matrix type