避免平铺 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）。我希望能够给渲染器提示，例如“<g> 中的所有形状都没有重叠”？

Answer 1

这是在形状和背景之间起作用的抗锯齿。如果要关闭它，请在形状上设置 shape-rendering="crispEdges"。您可以在 rect 元素或 <svg> 上设置它，在这种情况下 rect 元素将继承它。

您可以通过向坐标添加 0.5 来调整线的位置。请参阅cairo FAQ 了解更多详情。