美国地图 SVG 区域的边框悬停颜色错误

Question

我有美国地图，上面有州和地区的悬停在 svg 中

Here is the link toJSFiddle

这里的问题是区域的笔画悬停颜色，例如太平洋，效果不佳。

在红色高亮区域中，笔划悬停颜色效果很好， 但在绿色高亮区域中，笔触颜色效果不佳，混合了白色后会变薄。请看下面的图片以了解我的意思

Map with error & highlight

我希望它像下图一样，请看下图

Map Stroke/border Hover required type

请指导我如何做到这一点。

Answer 1

我不知道，由于stroke-width 的大小，它可能有点困难。看看下面的答案，我已经用悬停fill color 做到了。

.region:hover path {
  fill: #dece0c;
}
.st1, .st2, .st3 {
    pointer-events: none;
}

链接到：JSFiddle