两条SVG线重叠时的颜色问题

colour issues when 2 SVG lines are overlapping

本文关键字：颜色 问题 重叠 SVG 两条      更新时间：2023-09-26

在玩台词时遇到了这个问题。

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

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时，不会发生相同的问题。

这是我计算的例子

这通常会发生在所有奇数宽度的情况下，但与宽度为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);

在这里演示

显然，对于垂直线，您需要在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);

在这里演示

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

相关文章：