避免平铺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 offset是一个整数，则该行不可见。

我确信我可以通过使矩形比它们必须占据的空间大一点来避免线条。但这看起来像是一个黑客：是否有一个SVG成语或最佳实践来实现完美的平铺形状而没有“灌浆”？

我也担心渲染性能，因为我的可视化可能非常大（例如100MB XML .svg）。我希望能够给渲染器提示“这个<g>中没有任何形状重叠”吗？

Answer 1

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

您可以通过向坐标添加0.5来调整线的位置。有关详细信息，请参阅cairo FAQ。