How to add a drop shadow to SVG
I thought “Is it possible to add an id to SVG and add a drop shadow with CSS? ” and tried it, but I couldn’t do it.
It seems that I have to use a filter for SVG.
I referred to this article below.
Contents
Code
<svg x="0px" y="0px" viewBox="0 0 567.3 496.7">
<style type="text/css">
.st0{fill:#34ABEB;}
</style>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/><!-- stdDeviation:Blur -->
<feOffset dx="2" dy="2" result="offsetblur"/><!-- offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/><!-- slope:Transparency -->
</feComponentTransfer>
<feMerge>
<feMergeNode/><!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/><!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<path class="st0" d="M71.1,59.7h425.2c6.1,0,11,4.9,11,11V426c0,6.1-4.9,11-11,11H71.1c-6.1,0-11-4.9-11-11V70.7
C60.1,64.6,65,59.7,71.1,59.7z" filter="url(#dropshadow)"/><!-- Path you want to blur -->
</svg>
Describe the drop shadow specification in , and specify filter = “url (#dropshadow)” for the object to which you want to add the drop shadow.
That’s all.