避免平铺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常见问题解答.