Question

我想绘制具有一个像素宽度和精确定义颜色的垂直和水平线。无论我在尝试什么，我都无法在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使其显示为灰色/透明。不使用+0.5偏移量的y值没有帮助，任何行程宽度为1的东西都没有帮助。每个浏览器都有一个确切的解决方案，但没有一个是正确的所有三个。如果这还不够，您甚至可以将形状渲染属性添加到等式中，这也无济于事。这三种浏览器是否适用于任何一种尺寸的解决方案，或者我是否真的需要根据浏览器修改线条创建？

Answer 1

这是由于抗锯齿，并且已知某些浏览器将其应用于沿着像素的.5运行的线，而其他浏览器则将其应用于整个像素。

svg元素有一个css prop来覆盖它。

shape-rendering: crispEdges

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

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

1 个答案: