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

円や四角といったSVG要素のドロップシャドウを描画する方法を学んだのでメモ。

ドロップシャドウを描画するには、SVGのfilter要素を使います。filter要素を使うことで、SVGの各種グラフィックス要素に対して様々な効果を適用することが可能になります。

以下、正方形のドロップシャドウを描画するSVGのコード。

実行結果はこちら。

ちょっとだけ解説

前半部分で定義したドロップシャドウ用フィルターを、rect要素のfilter属性にて指定することで、rect要素にドロップシャドウ効果を適用しています。

ドロップシャドウ用フィルターは以下の3つのフィルターによって構成されています。

  • 入力画像に対して「ぼかし(ガウスぼかし)」を行うfeGaussianBlurフィルター。
  • 入力画像を指定された座標分ずらすfeOffsetフィルター。
  • 2つの入力画像を合成するfeBlendフィルター。

これらの3つのフィルターの入出力をつなぎあわせることで、ドロップシャドウ効果を実現しているわけです。具体的には以下のようなフローになります。

  1. feGaussianBlurフィルターを使って「rect要素で描画される画像のアルファチャンネル」をぼかす。
  2. feOffsetフィルターを使って「ぼかし画像」の位置を右に2px、下に2pxずらす。
  3. feBlendフィルターを使って「rect要素で描画される画像」と「ずらしたぼかし画像」を合成する。

意外とカンタンですね!

まとめ

複数のフィルターを使ってドロップシャドウ効果を実現する方法をメモしました。実際に試してみるまでは手間がかかるんじゃないかと怯えていましたが、いくつかのフィルタを組み合わせて使うだけカンタンに実現できることがわかりました。

SVGには他にも様々なフィルタがあらかじめ組み込まれています。それらを試行錯誤しながら組み合わせて、いろんな効果をためしてみるのも楽しそうですね。

ではまた。

参考資料