Проблемы с цветом, когда две линии SVG перекрываются

Question

, играя с линиями, столкнулась с этой проблемой.

Когда 2 SVG линии толщиной 1px или 1,5 пикселя перекрывают цвет линий становится темным, даже если 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 является примером, который разработал I'v

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

Очевидно, что для вертикальных линий, вам нужно будет добавить 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

Но будьте осторожны, это выключает сглаживание для линии, так что, если он не совсем горизонтально или вертикально, она будет выглядеть плохо.