相邻的 svg：多边形边不相交

我正在使用彼此相邻的多边形绘制条形图，如下所示：

如果仔细观察，每个多边形之间都有空白（放大）：

我正在努力阻止这种情况发生。我发现了 SVGshape-rendering https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering属性并将其设置为geometricPrecision。这解决了问题，但给了我非常清晰的边缘：

我也不希望那样。我尝试了其他可能的值shape-rendering但没有一个运作良好。 （我在 WebKit 上尝试过这些。）我正在寻找解决方案。

对于那些感兴趣的人，图表的 jsFiddlehere http://jsfiddle.net/9Vbgu/.

实际上，问题在于您应该将图形渲染为单个多边形，而不是每个条形的一个多边形，但我假设您这样做是有原因的。

一种可能的解决方案是设置描边属性，以便绘制多边形的轮廓，使它们稍微重叠。您可以在组元素上设置这些属性，以将它们应用到所有封闭的多边形。

<g stroke-width="0.5" stroke="black" stroke-linejoin="round">

更新了 jsFiddle 链接 http://jsfiddle.net/9Vbgu/2/

请注意，这使得图表看起来比应有的稍大，但我认为这不是一个重大问题。

至于发生这种情况的原因，那是因为多边形的偏移量没有在像素边界上完全对齐（至少在大多数情况下）。如果将 svg 宽度固定为 300px 的倍数（从而在像素边界上对齐所有内容），间隙就会消失。

考虑一个 4x4 像素区域，您尝试在其中渲染从 (0,0) 到 (2.5,2.5) 的正方形，如下所示：

您可以将从 (0,0) 到 (1,1) 的像素绘制为纯黑色，但是如何处理边缘 - 它们既不是全黑也不是全白。抗锯齿解决方案是使用与像素被覆盖的面积成比例的灰度。

但是，当您尝试在第一个多边形旁边渲染另一个多边形时（即从偏移量 2.5 开始），您将遇到相同的问题，即对左侧边缘进行抗锯齿处理。只是这次会稍微暗一点，因为背景是灰色而不是白色。

正如您所发现的，您可以通过设置不同的值来禁用此效果形状渲染选项，但是您会失去倾斜线上抗锯齿的优势，使这些边缘看起来呈锯齿状。