layout - 避免平铺 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"。您可以在矩形元素或 <svg> 上设置它在这种情况下，矩形元素将继承它。

您可以通过向坐标添加 0.5 来调整直线的位置。查看cairo FAQ有关这方面的更多详细信息。