javascript - 如何在美国的 SVG 地图上创建州之间的统一差距？

Question

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

每个状态都是它自己的 Raphael 对象，目前，我为每个状态使用 2px 白色笔画来表示其边界。

但是，我正在尝试匹配在每个状态之间具有均匀间隙的组合 - 以及背后的阴影：

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

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

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

我将不胜感激任何提示、想法或建议。谢谢！

score 0 · Accepted Answer

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

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

javascript - 如何在美国的 SVG 地图上创建州之间​​的统一差距？