避免平铺 SVG 形状之间的线 [英] Avoid line between tiled SVG shapes

问题描述

我使用多个不同颜色的矩形来构建 SVG 数据可视化.这很好用，但有时背景颜色会在矩形之间渗出.我正在使用 Chrome 浏览器，但其他浏览器似乎也受到了类似的影响.

I am using multiple differently colored rectangles to build a SVG data visualization. This works great but sometimes background color bleeds through between the rectangles. I am browsing with Chrome but other browsers seem similarly affected.

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 偏移量是整数，则该行不可见.

In Chrome, if the x offset is an integer, the line is not visible.

我确信我可以通过使矩形比它们必须占据的空间大一点来避免线条.但这似乎是一个黑客:是否有 SVG 习语或最佳实践可以在没有灌浆"的情况下实现完美的平铺形状?

I'm sure I can avoid lines by making rectangles a little larger than the space they have to occupy. But this seems like a hack: is there an SVG idiom or best practice to achieve perfectly tiled shapes without "grout"?

我还担心渲染性能，因为我的可视化可能非常大(比如 100MB XML .svg).我希望能够给渲染器提示，例如此 <g> 中的任何形状都不重叠"?

I'm also concerned by rendering performance because my visualizations can be very large (say 100MB XML .svg). I'd like to be able to give the renderer hints like "none of the shapes in this <g> are overlapping"?

推荐答案

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

This is antialiasing at work between the shape and the background. If you want to turn it off set shape-rendering="crispEdges" on the shapes. You can either set that on the rect elements or on the <svg> in which case the rect elements will inherit it.

您可以通过向坐标添加 0.5 来调整线的位置.请参阅开罗常见问题解答了解更多详情.

You may be able to adjust the line's positions by adding 0.5 to the co-ordinates. See the cairo FAQ for more details on this.

这篇关于避免平铺 SVG 形状之间的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！