SVG不均匀行程宽度

Question

下面的小提示显示了带有CSS悬停动画的SVG地图。

https://jsfiddle.net/persianturtle/akkjcmo1/

svg .state:hover , .state.active {
    cursor: pointer;
    stroke-width: 4;
    stroke-alignment: inner;
    stroke: #000;
    z-index: 100;
}

似乎没有应用stroke-alignment: inner;属性。似乎地图上的不同状态具有不同的笔划，这取决于边界被“拥有”的状态。是否有办法为所有悬停状态提供统一的笔划宽度？

要清楚地看到问题，请将鼠标悬停在加利福尼亚州和犹他州。加利福尼亚有一个很好的统一行程宽度。犹他州没有。

Answer 1

看看这个：

我将笔划宽度设为15只是为了表明这是首先打印哪个元素的问题。在SVG中，您无法为元素设置z-index，因为它们的优先级由它们在代码中出现的顺序设置。你需要一些JavaScript（我认为）来重新排序元素。一个很好的起点是这个问题：SVG re-ordering z-index (Raphael optional)。

此外，正如评论中所指出的那样，stroke-alignment仍然是工作草案，可能根本就没有用。

Answer 2

所以，我遇到了一个多边形，完全是你描述的笔划行为和笔划对齐：内部;没有被承认。

因此，由于忽略了笔划对齐，因此画板边缘的笔划部分会被剪裁。

我有一个大大简化的版本你正在做的事情我正在动态地计算我的点数，但是解决方法是将我的多边形/路径设置为几个像素，所以例如点0,0变为2 ，2。

然后所有的点及其外部/中心对齐的笔划都适合画板，并且不会被剪裁。