【D3.js】地図上にオーバーレイしたSVG要素にドロップシャドウを付ける

昨日の記事でLeafletで作成した地図上にSVGをオーバーレイしましたが、地図タイルとの相性によっては上に重ねたSVG要素が分かりづらい場合があります。 そこで、SVGのfilter機能を用いてドロップシャドウエフェクトをかけることで、オーバーレイした要素を目立たせてみました。 比較 ノーマル ドロップシャドウ付加 サンプルコード //Leaflet初期設定 var map = L.map('map').setView([39.702053 , 141.15448379999998], 5); var mapLink = '<a target="_blank" href="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>'; //Tile Map Serviceの指定 L.tileLayer( '

[qtamaki]

svg filter

[uenop]

d3js filter 乗算