【D3.js】Google Mapにsvgを使ってマスクをかける

最終更新日

Google Mapにマスクをかける

example

実は以前、ClipPathを使って似たようなことをやったことがあるのですが、Mask機能を使った方が綺麗に切り抜けたので掲載します。

地図上にオーバーレイしたSVGにマスクをかけるテクニックは、いろんなことに応用が利きそうですね。

サンプル

※マスクの表示・非表示はSVGにかかっています。地図が表示される部分は、svg上の要素を非表示にした部分です。
混乱しがちなので注意が必要です。