为什么有空格/“重叠”之间的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屋!