为什么有空格/“重叠”之间的rect元素之间不应该有？ [英] Why is there whitespace / "overlap" between rect elements where there shouldn't be?

问题描述

我使用d3.js以这种方式生成一些直接位于另一个之上的矩形：

I'm using d3.js to generate some rects which are directly above one another, in this fashion:

var greenRed = d3.select(".green-red").append("svg")
    .attr("height", 120);
greenRed.append("rect")
    .attr("fill", "green")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", 300);
greenRed.append("rect")
    .attr("fill", "red")
    .attr("x", 0)
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", 300);

我注意到，根据哪种颜色堆叠在一起，在矩形之间存在非常细的空白，或者两种颜色的一种重叠。

I've noticed that depending on which colours are stacked on top of one another, there is either a very thin whitespace present between the rectangles, or a sort of "overlap" of the two colours.

您可以在这个小提琴中看到我的意思： http ：//jsfiddle.net/ysim/PrC7X/

You can see what I mean in this fiddle: http://jsfiddle.net/ysim/PrC7X/

您可以看到 .green-green 和 .green-grey 没有问题（裸眼，反正）;但对于 .green-blue 和 .red-blue ，存在重叠， .green-red ，有一个额外的空格。

You can see that for .green-green and .green-grey there's no issue (to the naked eye, anyway); but for .green-blue and .red-blue, there is an overlap, and for .green-red, there is an extra whitespace.

我已尝试添加 .attr（stroke-rendering，crispEdges） href =http://stackoverflow.com/questions/13049336/avoid-lines-between-tiled-svg-shapes>这里）和 .attr（stroke，none ）到 rect 元素，以及将 rect 元素在 svg 中添加 .attr（stroke-rendering，crispEdges ）更改为 （建议这里），但这些解决方案都不工作。

I've tried adding .attr("stroke-rendering", "crispEdges") (suggested here) and .attr("stroke", "none") to the rect elements, as well as wrapping both the rect elements in a g element within the svg and adding .attr("stroke-rendering", "crispEdges") to that (suggested here), but neither of those solutions work.

导致这个额外空白/重叠的原因是什么，以及如何修复它以使颜色整齐排列，就像前两种情况一样？

What's causing this extra whitespace/overlap, and how do I go about fixing it so that the colours are neatly aligned, like in the first two cases?

推荐答案

这是抗锯齿。在< div> 元素中添加style =shape-rendering：crispEdges，它就会消失。

That's antialiasing. Add style="shape-rendering: crispEdges" to the <div> elements and it will go away. You could add it to the shapes themselves instead if you want either as an attribute or a style.

另一件要做的事情是为你的形状的y坐标添加0.5 有更多的信息，为什么工作此处

The other thing to do is to add 0.5 to the y co-ordinates of your shapes There's more information about why that works here

这篇关于为什么有空格/“重叠”之间的rect元素之间不应该有？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！