D3.jsで作った地球儀にSVGフィルターエフェクトを適用する。

最終更新日

D3の描画機能にsvgの画像効果を適用することで多彩な表現が可能になります。そこで今回は、D3でつくった地球儀にフィルターエフェクトを適用していろいろ面白い描画を試してみました。

SVGのフィルターについては下記サイトに詳細情報がすばらしくまとまって掲載されています。

svg要素の基本的な使い方まとめ

地球儀3種

D3のコードは3つとも殆ど同じなので、それぞれに適用したSVGフィルターだけ載せておきます。
chromeで動作確認してますが、IEは多分ver.10以上ないとダメかも。

一応、3つともマウスでグリグリ動かせます。

ドロップシャドウ

ちょっと浮いている風に。

globe dorpshadow

example

針金細工

ちょっとメタリックなパイプ感のあるエフェクト。
globe wirework

example

エンボス

エンボス風に表現……のはずが、これが一番ブラウザによって見え方が違うことに。
下記のスクリーンショットはChromeで見た場合、Firefoxで見ると散々なことになってしまってます。IE10でも、また違った感じで微妙な見え方になってます。
見比べてみると面白い……かも? しれません。
globle emboss

example