SVGにドロップシャドウをつける方法

svgにidをふって、CSSでドロップシャドウつけられるかな?と思ったらつけられませんでした。

SVGにはfilterを使うそうです。

こちらの記事を参考にさせていただきました。

SVG drop shadow using css3

コード解説

<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:ぼかし -->
      <feOffset dx="2" dy="2" result="offsetblur"/><!-- オフセット -->
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5"/><!-- slope:透明度 -->
      </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 -->
</svg>

<filter id=”dropshadow”></filter>にドロップシャドウの指定を記述し、ドロップシャドウをつけたいオブジェクトにfilter=”url(#dropshadow)”を指定します。

以上です。