如何在美国的SVG地图上创建状态之间的统一间隙？

Question

我目前的项目是美国的热图：

http://up.massrelevance.com/cnbc/top-states/heatmap.html

每个州都有自己的Raphael对象，目前我正在为每个州使用2px白色笔画来代表它的边界。

然而，我正在尝试匹配一个在每个状态之间具有均匀间隙和背后的阴影的组合：

http://www.evernote.com/shard/s223/sh/00da56ce-658a-40f2-ae2f-b2b1c470f845/f4b490b7a409511974496b5d8beb7ffb

从视觉角度来看，我基本上需要将地图中的白线更改为透明/空白空间，以便显示阴影。

有没有相对简单的方法来实现这一目标？到目前为止我的想法：

• 远射的愿望，但如果存在的话，使用某种“负面”击球。透明笔划只是不可见，但是“穿过”任何路径/笔划/填充其下面的图层以显示背景的笔划将是一个微不足道的修复。
• 删除笔划并使用Raphael的transform属性和.attr()方法将每个状态缩小一点（例如，5％）。我试过这个并且效果相当好，但需要注意的是状态不是对称的，因此它们基于通常不理想的中心点进行缩放（许多状态偏离中心并略微重叠）。这个中心点可以改变，但这将涉及大量繁琐的试验和大量州的错误。
• 使用与投影颜色匹配的笔触颜色模拟状态之间的间隙。这将足够接近，但顶部和周围的阴影色笔触。北/西州的左边将是一个赠品。

我非常感谢任何提示，想法或建议。谢谢！

Answer 1

SVG中没有像负面笔画那样的东西。但是，您可以做的是缩小填充区域，以便获得所需的间隙，并避免使用笔划。

您可以使用实验Element.blur(amount)方法（需要SVG过滤器支持，因此在Safari 5或IE9中不起作用）。它应该可以在所有其他浏览器中正常工作，包括IE10。