svg - 相邻的 svg :polygon edges do not meet

Question

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



如果仔细观察，每个多边形之间都有空格(放大):



我正在努力防止这种情况发生。我发现了 SVG shape-rendering 属性并将其设置为 geometricPrecision .这解决了问题，但给了我非常清晰的边缘:



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

对于那些感兴趣的人，图表的 jsFiddle here .

Answer 1

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

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

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

Updated jsFiddle link

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

至于它发生的原因，那是因为多边形的偏移量在像素边界上没有完全对齐(至少大部分时间)。如果您将 svg 宽度固定为 300px 的倍数(从而将所有内容对齐像素边界)，则间隙应该消失。

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



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



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



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