相邻SVG：多边形的边不符合

Question

我画使用多边形条形图彼此相邻像这样：

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

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

我不想，要么。我尝试了其他可能的值shape-rendering，但都没有效果。 （我在WebKit上试过这些）。我正在寻找一个解决方案。

对于有兴趣的人，jsFiddle的图表here。

Answer 1

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

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

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

Updated jsFiddle link

注意，这使得图会略有biggger比它应该是，但我不认为这是一个显著的问题。

至于它发生的原因，那是因为您的多边形的偏移不完全对齐像素边界（至少大部分时间）。如果您将svg宽度固定为300px的倍数（因此将像素边界上的所有内容对齐），间隔应该消失。

考虑一个4×4像素区域，在那里你试图呈现从（0,0）一广场（2.5,2.5）这样的：

你可以画从像素（0 ，0）到（1,1），但是如何处理边缘 - 它们既不是完全黑色也不是完全白色。抗锯齿解决方案是使用与覆盖多少像素成比例的灰度阴影。

但是当你试图渲染另一个多边形旁边的第一个（即起始于2.5偏移量），你将有同样的问题抗锯齿左手边缘。由于背景是灰色而不是白色，因此这次只会稍微变暗。

当你发现，你可以通过设置不同的形状呈现选项禁用此效果，但你失去斜线抗锯齿的利益，使这些边缘呈锯齿状。

Answer 2

我发现了这个问题的明确和优雅的解决方案。 使用多个线段将您的多个多边形到一个路径：

<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="100%" height="30%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path d="M0,100 0,70 3.3333333333333335,66 3.3333333333333335,100 M3.3333333333333335,100 3.3333333333333335,66 6.666666666666667,66 6.666666666666667,100 M6.666666666666667,100 6.666666666666667,66 10,62 10,100 M10,100 10,62 13.333333333333334,57.99999999999999 13.333333333333334,100 M13.333333333333334,100 13.333333333333334,57.99999999999999 16.666666666666664,56 16.666666666666664,100 M16.666666666666664,100 16.666666666666664,56 20,54 20,100 M20,100 20,54 23.333333333333332,40 23.333333333333332,100 M23.333333333333332,100 23.333333333333332,40 26.666666666666668,24 26.666666666666668,100 M26.666666666666668,100 26.666666666666668,24 30,15.999999999999998 30,100 M30,100 30,15.999999999999998 33.33333333333333,13.999999999999996 33.33333333333333,100 M33.33333333333333,100 33.33333333333333,13.999999999999996 36.666666666666664,11.999999999999996 36.666666666666664,100 M36.666666666666664,100 36.666666666666664,11.999999999999996 40,10.000000000000004 40,100 M40,100 40,10.000000000000004 43.333333333333336,10.000000000000004 43.333333333333336,100 M43.333333333333336,100 43.333333333333336,10.000000000000004 46.666666666666664,8.000000000000004 46.666666666666664,100 M46.666666666666664,100 46.666666666666664,8.000000000000004 50,8.000000000000004 50,100 M50,100 50,8.000000000000004 53.333333333333336,6.000000000000002 53.333333333333336,100 M53.333333333333336,100 53.333333333333336,6.000000000000002 56.666666666666664,6.000000000000002 56.666666666666664,100 M56.666666666666664,100 56.666666666666664,6.000000000000002 60,8.000000000000004 60,100 M60,100 60,8.000000000000004 63.33333333333333,10.000000000000004 63.33333333333333,100 M63.33333333333333,100 63.33333333333333,10.000000000000004 66.66666666666666,8.000000000000004 66.66666666666666,100 M66.66666666666666,100 66.66666666666666,8.000000000000004 70,11.999999999999996 70,100 M70,100 70,11.999999999999996 73.33333333333333,13.999999999999996 73.33333333333333,100 M73.33333333333333,100 73.33333333333333,13.999999999999996 76.66666666666667,11.999999999999996 76.66666666666667,100 M76.66666666666667,100 76.66666666666667,11.999999999999996 80,10.000000000000004 80,100 M80,100 80,10.000000000000004 83.33333333333334,11.999999999999996 83.33333333333334,100 M83.33333333333334,100 83.33333333333334,11.999999999999996 86.66666666666667,13.999999999999996 86.66666666666667,100 M86.66666666666667,100 86.66666666666667,13.999999999999996 90,11.999999999999996 90,100 M90,100 90,11.999999999999996 93.33333333333333,4.000000000000002 93.33333333333333,100 M93.33333333333333,100 93.33333333333333,4.000000000000002 96.66666666666667,0 96.66666666666667,100 M96.66666666666667,100 96.66666666666667,0 100,0 100,100 M100,100 100,0 100,0 100,100"/> 
</svg> 

http://jsfiddle.net/313xc6bg/

，如果你想，虽然不同的效果应用到每个段它不会然而工作。在这种情况下，我认为解决方法是增加一个足够宽的笔触以覆盖空白区域，同时保持AA位置。

另外，我仍然遇到Safari（仅限于）不同多边形中点的顺序问题。更改顺序（即顺时针到逆时针）解决了问题。