我正在使用相邻的多边形绘制条形图，如下所示：
如果仔细观察，每个多边形之间都有空白（放大）：
我正在努力防止这种情况发生。我发现了 SVG shape-rendering 属性并将其设置为 geometricPrecision。这解决了问题，但给了我非常清晰的边缘：
我也不想这样。我为shape-rendering 尝试了其他可能的值，但没有一个效果很好。 （我在 WebKit 上试过这些。）我正在寻找解决方案。
有兴趣的朋友，图表的jsFiddle here。
【问题讨论】：
shape-rendering 的提示！正是我想要的。链接文章没有注意到的是，您也可以在 SVG 内的组上使用它，如果您有几何形状和文本轮廓（您确实想要消除锯齿，这将非常方便) 合并。
标签： svg rendering shape-rendering
真正的问题是您应该将图形渲染为单个多边形而不是每个条形图一个多边形，但我假设您这样做是有原因的。
一种可能的解决方案是设置描边属性，这样多边形的轮廓就会被绘制出来，使它们稍微重叠。您可以在 group 元素上设置这些属性以将它们应用于所有封闭的多边形。
<g stroke-width="0.5" stroke="black" stroke-linejoin="round">
请注意，这会使图表看起来比应有的稍大，但我认为这不是一个大问题。
至于发生这种情况的原因，那是因为您的多边形的偏移在像素边界上并没有完全对齐（至少在大多数情况下）。如果您将 svg 宽度固定为 300 像素的倍数（从而对齐像素边界上的所有内容），间隙应该会消失。
考虑一个 4x4 像素区域，您尝试在其中渲染一个从 (0,0) 到 (2.5,2.5) 的正方形，如下所示：
您可以用纯黑色绘制从 (0,0) 到 (1,1) 的像素，但是如何处理边缘 - 它们既不是全黑也不是全白。抗锯齿解决方案是使用与覆盖像素的多少成比例的灰色阴影。
但是当您尝试在第一个多边形旁边渲染另一个多边形时（即从 2.5 的偏移量开始），您将遇到相同的问题，即左边缘的抗锯齿。只是这次会稍微暗一些，因为背景是灰色而不是白色。
正如您所发现的，您可以通过设置不同的 shape-rendering 选项来禁用此效果，但是这样您就失去了斜线抗锯齿的好处，使这些边缘看起来参差不齐。
【讨论】：
我为这个问题找到了一个明确而优雅的解决方案。 将您的多个多边形转换为具有多个段的路径：
<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>
但是，如果您想对每个片段应用不同的效果，它将不起作用。在这种情况下，我认为解决方法是添加足够宽的笔触以覆盖空白，同时保持 AA 开启。
此外，我仍然对 Safari（仅）在不同多边形中点的顺序方面存在问题。更改顺序（即顺时针到逆时针）解决了问题。
【讨论】：