SVG Filter for d3.js

html5 svg

この記事はHTML5 Advent Calendar 2012の10日目の記事です。遅くなってすみません

SVG filterとは、SVGの画像要素やrect、circleなどの要素に対して、様々なエフェクトを掛ける仕様です。
W3Cでは「W3C Recommendation」となっています。

利用フロー

  1. filter要素内に一連のフィルタ処理を定義(このfilter要素にidを振っておく)
  2. オリジナルの要素を用意
  3. 要素にfilter属性としてurl(#{FILTERID})を指定

使い方

こちらに既にあるので御覧ください

今日の記事

d3ばかりですみません。

普通に、defs > filter > primitive filters とappendしていけばつかるんですが、再利用性とかいろいろ面倒そうです。
こちらが本家のbostockさんのサンプルなんですが、

なんか、えぇ〜、って感じですよね。せっかくのd3なのに・・・

MLでもbostock氏のサンプルでみんな黙ってしまったのでなんだかなぁ・・・という感じです。

というわけで、作ってみました。
全然、引数は変化なしですし、まだ、validationなども作っていませんが、おいおいやります。

filterを気持よく使うことができます