在SVG地图上添加渐变到水,例如Google Maps(PHP / JS)

时间:2016-05-15 10:30:33

标签: javascript php google-maps svg raphael

仔细观察谷歌地图,你会发现水域不仅仅是一种颜色,而是一种颜色渐变。在陆地附近,蓝色比远处更暗。

我在一个关于时区(http://worldtimemap.net/)的小型网站上有一张SVG地图。地图看起来很无聊,我想通过程序代码在Google地图中添加水渐变效果。

有关此效果背后的编程的暗示吗?我已经加入了Raphael JS。

1 个答案:

答案 0 :(得分:1)

您可以将渐变镜像过滤器CSS属性应用于SVG,如下所示:

svg {
  -webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,.2));
  filter: drop-shadow(0 0 5px rgba(0,0,0,.2));
}
当然,

对你想要的模糊/传播/颜色值进行任何调整。