SVGにドロップシャドウをつける方法
svgにidをふって、CSSでドロップシャドウつけられるかな？と思ったらつけられませんでした。
SVGにはfilterを使うそうです。
こちらの記事を参考にさせていただきました。
Contents
コード解説
<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)”を指定します。
以上です。