SVG のfilterを使用したドロップシャドウの作り方

はじめに

SVGを使用しているサイトが多くなってきました。
SVGにはCSSが効きますが、プロパティ「box-shadow」は使うことができません。
今回はSVGのfilterを使用したドロップシャドウの作り方を紹介します。

SVG filterを作る

<filter id="drop-shadow">
  <!-- 図形の影をSourceAlphaで取得、ぼかす-->
  <feGaussianBlur in="SourceAlpha" stdDeviation="10"></feGaussianBlur>
</filter>

id名は任意です。
原始フィルタの「feGaussianBlur」を使用してfilterを作ります。
「stdDeviation」の値でぼかし具合を変えることができます。

使ってみる

<path filter="url(#drop-shadow)" d="..."/>

SVGを直接インラインで書いています。
使用したい要素に対してfilterを指定します。
filterは下記のようにCSSでも指定できますが、firefoxでうまく動きませんでした。(ver 45.0.1)

.svg{
  filter:url(#drop-shadow);
}

なのでインラインで書いたほうがいいかなと。

デモ

本体の動きはCSSアニメーション。
pathのスタイルはCSSで当てています。SVGのスタイルはCSSで管理できたほうが絶対便利です。

DEMO

さいごに

今回使用したSVGフィルターはほんの一つの使用例です。
SVGフィルターは他にもたくさんあります。
数がありすぎるので説明はしませんが、興味があれば是非調べてみて下さい。