我想绘制具有恰好一个像素宽度和精确定义的颜色的垂直和水平线。 无论我如何尝试，我都无法使一种解决方案同时在 Firefox、Chrome 和 Internet Explorer 中正确运行。
假设我想在第二个像素线中绘制一条黑色的完整水平线，在 d3.js 中你会认为这就是解决方案:
.append("line")
.attr("x1", 0)
.attr("y1", 1.5)
.attr("x2", 100)
.attr("y2", 1.5)
.attr("stroke-width", 0.5)
.attr("stroke", "black");
从数学上讲，它应该完全符合我的要求，不是吗？ 不，事实并非如此。 Firefox 不显示它，IE 和 Chrome 将其设置为灰色/透明。 不对 y 值使用 +0.5 偏移量没有帮助，任何具有描边宽度 1 的内容也没有帮助。每种浏览器确实都有一种精确的解决方案，但没有一种解决方案能够同时适用于这三种浏览器。 如果这还不够，您甚至可以将形状渲染属性添加到方程中，但这也没有帮助。 是否有一种适用于这三种浏览器的解决方案，或者我真的必须根据浏览器修改线路创建吗？
最佳答案
这是由于抗锯齿所致，众所周知，某些浏览器将其应用于沿像素 0.5 延伸的线条，而其他浏览器则应用于整个像素。
svg 元素有一个 css 属性来覆盖它。
shape-rendering: crispEdges
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
关于svg - 如何使用 d3.js/SVG 绘制单像素线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19870259/