SVG 不均匀的笔画宽度答案

【问题标题】：SVG uneven stroke-widthSVG 不均匀的笔画宽度
【发布时间】：2016-05-02 04:06:25
【问题描述】：

下面的小提琴显示了一个带有 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; 属性。似乎地图上的不同州有不同的笔画，具体取决于边界“拥有”的州。有没有办法为所有悬停状态设置统一的笔划宽度？

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

【问题讨论】：

stroke-alignment 是名为 SVG Strokes 的 SVG 扩展的一部分，目前仍是工作草案。我认为它尚未在任何生产软件中实现，因为仍然存在一些基本问题，例如“内部”在开放路径中的含义。
@Codo。感谢您的解释。我将改为为运行良好的fill 制作动画。

标签： css svg

【解决方案1】：

看看这个：

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

此外，正如 cmets 中所指出的，stroke-alignment 仍然是一个工作草案，可能根本无法工作。

【讨论】：

【解决方案2】：

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

所以，因为笔画对齐被忽略了，所以画板边缘的笔画部分会被剪掉。

我有一个大大简化的版本，我正在动态计算我的点，但解决方法是将我的多边形/路径设置为内部几个像素，例如点 0,0 变为 2 ,2.

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

【讨论】：