この記事は SVG Advent Calendar 2014 の2日目の記事です。前日の記事は、t_motooka さんの「clip と transform との組み合わせ – 職業プログラマの休日出勤」でした。 SVG の filter 要素を使うとどんなことができるのかという基本的なことと、filter 要素を使ったわりと簡単にできるマウスオーバー効果の作り方をご紹介します。 filter 要素でどんなことができるのか filter 要素では SVG 内の画像をぼかしたり、色相を変えたりするようなフィルターを作ることができます。 ただ、filter 要素単独でフィルターを作る訳ではなく、原始フィルター(フィルターの効果を定義するようなもの?)と呼ばれる要素を子要素として記述しセットで使います。 原始フィルター要素は、feGaussianBlur(ぼかし)・feColorMatrix(明
![[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3af36800c727b01cdc29d731d974d7938ff24136/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F12%2Ficon.jpg)