Question

玩线时遇到了这个问题。

当厚度为1px或1.5px的2条svg线重叠时，即使使用相同颜色的bothare，线的颜色也会变暗。

var myLine = lineGraph.append("svg:line") .attr("x1", 40) .attr("y1", 50) .attr("x2", 450) .attr("y2", 50) .style("stroke", "rgb(6,120,155)") .style("stroke-width", 1);

当线的粗细大于2时，不会发生同样的问题。

here是我解决的例子

Answer 1

这通常会发生在所有奇数宽度上，但与宽度为1相比，它会更不明显。

原因是您正在精确地在像素边界上绘制1像素线。这意味着由于抗锯齿，渲染器在一行像素上绘制50％的线，在下面的像素行上绘制50％。

您实际上无法绘制半个像素，因此它所做的就是在每条线上以50％的不透明度绘制像素。

+---+---+---+
|50%|50%|50%|
+---+---+---+  ...etc...
|50%|50%|50%|
+---+---+---+

对于第一行，它绘制的是50％白色（背景）和50％蓝色的混合物。

对于透支线，它正在绘制50％蓝白混合和50％蓝色的混合物。导致颜色变深。

解决方案

确保在半像素点处绘制一条像素线，以使该线不会分割为两行像素。例如：

var myLine = lineGraph.append("svg:line")
    .attr("x1", 40)
    .attr("y1", 100.5)
    .attr("x2", 450)
    .attr("y2", 100.5)
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-width", 1);

Demo here

显然，对于垂直线，你需要在X坐标上添加0.5。

如果出于某种原因，您无法做到这一点，那么另一种解决方案是将shape-rendering属性设置为crispEdges。

var myLine = lineGraph.append("svg:line")
    .attr("x1", 40)
    .attr("y1", 100)
    .attr("x2", 450)
    .attr("y2", 100)
    .attr('shape-rendering', 'crispEdges')
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-width", 1);

Demo here

但要注意，这会关闭线路的抗锯齿，所以如果它不是完全水平或垂直的，它看起来会很糟糕。

2个SVG线重叠时的颜色问题

1 个答案: