相邻的svg:多边形边不相交 [英] Adjacent svg:polygon edges do not meet
问题描述
我正在使用彼此相邻的多边形绘制条形图，如下所示:
I am drawing a bar chart using polygons next to each other like this:
如果您仔细观察，则每个多边形之间都有空白(缩放):
If you look closely, there are white spaces between each polygon (zoomed):
我正在努力防止这种情况的发生.我发现SVG shape-rendering 属性和将其设置为geometricPrecision.这解决了问题，但给了我非常清晰的边缘:
I am trying to prevent this from happening. I found out SVG shape-rendering attribute and set it to geometricPrecision. This solved the problem but gave me very crisp edges:
我也不想要那个.我尝试了shape-rendering的其他可能值，但均无法正常工作. (我在WebKit上尝试过这些.)我正在寻找解决方案.
I do not want that either. I tried other possible values for shape-rendering but none worked well. (I tried these on WebKit.) I am looking for a solution.
对于感兴趣的人，请在图表的jsFiddle 此处.
For those interested, jsFiddle of the chart here.
推荐答案
真正的问题是，您应该将图形呈现为单个多边形，而不是每个条形都呈现一个多边形，但是我认为这是有原因的就是这样.
Really the problem is that you should be rendering the graph as a single polygon rather than one polygon for each bar, but I'm assuming there is a reason you are doing it this way.
一种可能的解决方案是设置笔划属性，以便绘制多边形的轮廓，使它们略微重叠.您可以在group元素上设置这些属性，以将其应用于所有封闭的多边形.
One possible solution is to set the stroke properties, so the outline of the polygons are drawn, causing them to slightly overlap. You can set those properties on the group element to apply them to all the enclosed polygons.
<g stroke-width="0.5" stroke="black" stroke-linejoin="round">
请注意，这会使图形看起来比应有的略大，但我认为这不是一个重大问题.
Note that this makes the graph look slightly biggger than it should be, but I don't think that's a significant problem.
由于发生这种情况的原因，这是因为(至少在大多数情况下)多边形的偏移未在像素边界上完全对齐.如果您将svg宽度固定为300px的倍数(因此将所有像素对齐在像素边界上)，则间隙应该会消失.
As for the reason why it is happening, that is because the offsets of your polygons aren't exactly aligned on pixel boundaries (at least most of the time). If you fixed the svg width at a multiple of 300px (thus aligning everything on pixel boundaries) the gaps should go away.
考虑一个4x4像素区域，您要在此处尝试绘制从(0,0)到(2.5,2.5)的正方形，如下所示:
Consider a 4x4 pixel area, where you are trying to render a square from (0,0) to (2.5,2.5) like this:
您可以将像素(0,0)到(1,1)涂成纯黑色，但是如何处理边缘-它们既不是全黑也不是全白.反走样解决方案是使用与覆盖多少像素成比例的灰色阴影.
You can paint the pixels from (0,0) to (1,1) in solid black, but how do you handle the edges - they're neither completely black nor completely white. The anti-aliasing solution is to use a shade of grey proportional to how much of the pixel is covered.
但是，当您尝试在第一个多边形旁边绘制另一个多边形(即以2.5的偏移量开始)时，您将遇到同样的问题，即对左边缘进行抗锯齿处理.因为背景是灰色而不是白色，所以这次只会变暗一些.
But then when you try and render another polygon right next to the first one (i.e. starting at an offset of 2.5), you are going to have the same issue anti-aliasing the left hand edge. Only it'll be slightly darker this time since the background is grey rather than white.
您已经发现，可以通过设置不同的 shape-rendering 选项来禁用此效果，但是您会失去倾斜线上的抗锯齿功能，使这些边缘看起来参差不齐.
As you have found, you can disable this effect by setting a different shape-rendering option, but then you lose the benefit of the anti-aliasing on sloped lines, making those edges look jagged.
这篇关于相邻的svg:多边形边不相交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
