避免在平铺的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.

我敢肯定，通过使矩形比其必须占据的空间大一些，可以避免出现线条.但这似乎是一个hack:是否有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屋！