Why are there spaces / "overlaps" between the straight elements where they shouldn't be?
I am using d3.js to generate some lines that are directly above each other, this way:
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 noticed that depending on which colors are stacked on top of each other, there is either a very thin blank between the rectangles, or something like an "overlap" of two colors.
You can see what I mean in this fiddle: http://jsfiddle.net/ysim/PrC7X/
You can see that for .green-green
and .green-grey
there is no problem (with the naked eye, anyway); but for .green-blue
and .red-blue
there is overlap, and for there .green-red
are extra spaces.
I tried adding .attr("stroke-rendering", "crispEdges")
(suggested here ) .attr("stroke", "none")
to elements rect
as well, and wrap both elements rect
in an element g
in svg
and adding .attr("stroke-rendering", "crispEdges")
to this (suggested here ), but none of these solutions work.
What is causing the extra spaces / overlaps, and how can I fix them so the colors are neatly aligned like in the first two cases?
source to share
This is anti-aliasing. Add style = "shape-rendering: crispEdges" to the elements <div>
and it disappears. You can add it to the forms themselves if you want either as an attribute or as a style.
Another thing is to add 0.5 to the y coordinates of your shapes.There is more information on why this works here
source to share