如何使用d3.js/SVG绘制单像素线

我想画垂直和水平线，只有一个像素的宽度和精确定义的颜色。 无论我在尝试什么，我都无法让一个解决方案同时在Firefox、Chrome和Internet Explorer中正常工作

假设我想在第二条像素线上画一条黑色的全水平线，在d3.js中，你会认为这是解决方案：

.append（“行”）
.attr（“x1”，0）
.attr（“y1”，1.5）
.attr（“x2”，100）
.attr（“y2”，1.5）
.attr（“笔划宽度”，0.5）
.attr（“笔划”、“黑色”）；

从数学上讲，它应该完全符合我的要求，不是吗？ 不，没有。 Firefox不显示它，IE和Chrome使它变成灰色/透明。 不为y值使用+0.5偏移也没有帮助，任何笔划宽度为1的都没有帮助。每个浏览器都有一个精确的解决方案，但没有一个是三者都适用的。 如果这还不够，您甚至可以将“形状渲染”（shape rendering）属性添加到等式中，这也无济于事。

---

对于这三种浏览器是否有一种一刀切的解决方案，或者我是否真的必须根据浏览器修改线条创建？

这是由于抗锯齿，并且众所周知，一些浏览器将其应用于沿像素.5的线条，而另一些浏览器则应用于整个像素

svg元素有一个css道具来覆盖它

shape-rendering: crispEdges

---

这是由于消除混叠，众所周知，有些浏览器将其应用于沿像素0.5的线条，而另一些浏览器则应用于整个像素

svg元素有一个css道具来覆盖它

shape-rendering: crispEdges

---

添加CrisEdge会使线条在FF上不可见，在IE上为灰色，在Chrome上为正确。不是这样…如果使用Crispedges，请尝试将笔划设置为1 px而不是0.5。添加Crispedges会使线条在FF上不可见，在IE上为灰色，在Chrome上为正确。不是这样…如果使用CrispEdge，请尝试将笔划设置为1 px，而不是0.5