26

我正在使用多个不同颜色的矩形来构建 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>是重叠的”？

4

1 回答 1

34

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

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

于 2012-10-24T12:38:48.290 回答