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;属性。似乎地图上的不同状态具有不同的描边，取决于边框所属的州是哪个。是否有一种方法可以为所有悬停状态统一描边宽度？

为了清楚地看到问题，请将鼠标悬停在加利福尼亚州，然后再悬停在犹他州。加利福尼亚州具有统一的描边宽度。但犹他州没有。

- Raphael Rafatpanah

---

stroke-alignment 是 SVG Strokes 扩展的一部分，仍处于工作草案阶段。我认为它还没有在任何生产软件中得到实现，因为仍然存在基本问题，例如在开放路径中 "inner" 的意义是什么。 - Codo

@Codo。感谢您的解释。我将改为使用“填充”动画，这个方法效果很好。 - Raphael Rafatpanah

Answer 1

请看这个：

我将描边宽度设置为15，只是为了说明这是哪个元素先被打印出来的问题。在SVG中，你不能为元素设置z-index，因为它们的优先级是由它们在代码中出现的顺序决定的。你需要一些JavaScript（我想）来重新排序这些元素。一个很好的起点是这个问题：SVG重新排序z-index（Raphael可选）。

另外，正如评论中指出的那样，stroke-alignment仍然是一个草案，并可能根本不起作用。

- fnune

Answer 2

我在处理一个多边形时遇到了问题，正如您所描述的那样，描边行为并未被识别，而stroke-alignment: inner;也未被承认。

因此，由于stroke-alignment被忽略，位于画板边缘的描边部分被剪裁。

我有一个非常简化的版本，可以动态计算我的点，但解决方法是将我的多边形/路径设置在几个像素内，例如点0,0变成2,2。

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

- MichaelClark