SVGでドロップシャドウを描画する | CreativeStyle

円や四角といったSVG要素のドロップシャドウを描画する方法を学んだのでメモ。 ドロップシャドウを描画するには、SVGのfilter要素を使います。filter要素を使うことで、SVGの各種グラフィックス要素に対して様々な効果を適用することが可能になります。 以下、正方形のドロップシャドウを描画するSVGのコード。 <svg> <filter id="drop-shadow" width="150%" height="150%"> <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="2" /> <feOffset result="offsetBlur" dx="2" dy="2" /> <feBlend in="SourceGraphic" in2="offsetBlur" mode="normal" /> </filte

[hatano99]

“ <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="2" /> <feOffset result="offsetBlur" dx="2" dy="2" /> <feBlend in="SourceGraphic" in2="offsetBlur" mode="normal" /> </filter>”

[daizo1117]

“filter="url(#drop-shadow)"”

[typista]

ぽけったー SVGでドロップシャドウを描画する