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

Question

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

如果仔细观察,每个多边形之间会有空白区域(缩放):

我试图阻止这种情况发生.我找到了SVG shape-rendering属性并将其设置为geometricPrecision.这解决了问题,但给了我非常清晰的边缘:

我也不想要那个.我尝试了其他可能的值,shape-rendering但没有一个很好.(我在WebKit上试过这些.)我正在寻找解决方案.

对于那些感兴趣的人,这里的图表是jsFiddle .

Answer 1

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

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

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

更新了jsFiddle链接

请注意,这使图形看起来比它应该略大,但我不认为这是一个重大问题.

至于它发生的原因,那是因为你的多边形的偏移在像素边界上没有精确对齐(至少在大多数时候).如果你将svg宽度固定在300px的倍数(从而对齐像素边界上的所有内容),那么间隙应该消失.

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

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

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

如您所见,您可以通过设置不同的形状渲染选项来禁用此效果,但是您会失去斜线上消除锯齿的好处,使这些边看起来呈锯齿状.