I want to draw vertical and horizontal lines with exactly one pixel width and an exactly defined color. Whatever I am trying I can not make one solution work in Firefox, Chrome and Internet Explorer at once correctly.
Say I want to draw a black full horizontal line in the second pixel line, in d3.js you'd think this is the solution:
.append("line")
.attr("x1", 0)
.attr("y1", 1.5)
.attr("x2", 100)
.attr("y2", 1.5)
.attr("stroke-width", 0.5)
.attr("stroke", "black");
Mathematically it should do exactly what I want, no? Nope, it doesn't. Firefox doesn't display it, IE and Chrome make it grey/transparent. Not using a +0.5 offset for the y value doesn't help, anything with stroke-width 1 doesn't help either. Each browser does have one exact solution, but there is none that is right with all three. If that isn't enough you can even add the shape-rendering attribute to the equation, which too doesn't help. Is there any one size fits all solution for those three browser or do I seriously have to modify the line creation depending on browser?
