2

我想用一个像素宽度和一个精确定义的颜色绘制垂直和水平线。无论我在尝试什么,我都无法让一种解决方案同时在 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 的东西也无济于事。每个浏览器都有一个确切的解决方案,但没有一个对所有三个都是正确的。如果这还不够,您甚至可以将形状渲染属性添加到方程中,这也无济于事。是否有任何一种尺寸适合这三个浏览器的所有解决方案,或者我是否真的必须根据浏览器修改行创建?

4

1 回答 1

4

这是由于抗锯齿,众所周知,一些浏览器将其应用于沿着像素 0.5 的线条,而其他浏览器则在整个像素上进行。

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

shape-rendering: crispEdges

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

于 2013-11-09T00:16:01.710 回答