避免在平铺的SVG形状之间出现线条

Question

我正在使用多个不同颜色的矩形来构建SVG数据可视化。 这很好用，但有时候矩形之间会出现背景颜色渗透。我正在使用Chrome浏览器，但是其他浏览器似乎也受到影响。

http://jsfiddle.net/dVEPk/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10.5" y="10" height="100" width="100"
          style="stroke:none; fill: #00cc00"/>
  <rect x="110.5" y="10" height="100" width="100"
          style="stroke:none; fill: #00cc00"/>
</svg>

在Chrome中，如果x偏移量是整数，则线条不可见。

我相信可以通过使矩形比它们所要占据的空间稍微大一些来避免线条。但这似乎是一个hack：是否有SVG惯用语或最佳实践可以实现完美平铺的形状而没有“缝隙”？

我还担心渲染性能，因为我的可视化可能非常大（比如100MB的XML .svg）。我希望能够给渲染器一些提示，例如“此

- paperjam

Answer 1

这是抗锯齿技术在形状和背景之间的应用。如果您想关闭它，请在形状上设置shape-rendering="crispEdges"。您可以将其设置在rect元素上，也可以在<svg>上设置，这样rect元素将继承它。

通过将坐标加0.5来调整线条位置可能是有效的。有关更多详细信息，请参见cairo FAQ。

- Robert Longson

---

哇，太棒了……我想缺点就是当形状本身大小约为像素大小或更小时，它们的颜色会出现走样。 - paperjam

crispEdges 禁用抗锯齿。如果您绘制对角线，您会发现它们看起来比抗锯齿线条更加粗糙。 - Robert Longson

难道没有一种解决方案，既不会破坏圆角线条所必需的抗锯齿效果，又能解决问题吗？这个解决方案解决了一个问题，同时又产生了另一个问题... - matanster

@matt 很抱歉，目前的浏览器渲染器和SVG 1.1版本无法实现。唯一的解决方法是通过添加边框或让形状重叠来解决问题。但如果形状不是不透明的，则此方法无效。您可以尝试放置一个填充完全填补间隙的锯齿形状，但我的经验是间隙会根据放大倍数而改变大小。对于直线，您可以尝试使用精确的像素边界，但同样会在缩放时出现问题。 - trlkly

这仅适用于某些简单（直角？多边形？）的形状。例如同心圆即使关闭抗锯齿仍会显示间隙。 - posfan12