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.

SVG drop shadow using css3

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.

cording(en)

Posted by raccoon-admin