Why do SVG lines/ paths on top of each other create a different stroke?

Question

I am drawing some paths with the same stroke with some significant overlap (dynamically creating and updating a tree). On the overlapping regions, the stroke looks different (darker as well as thicker -see a) as on the non overlapping regions (- see b). The same effect is noticeable with different stroke colors, too.

Here is the code:

 path.p2 { fill: none; stroke: black; stroke-width: 1px; }

 <svg height="500" width="400"> <path class="p2" d="M210 10 V 100 H 300 "/> <path class="p2" d="M210 10 V 120 H 300 "/> <path class="p2" d="M210 10 V 140 H 300 "/> <path class="p2" d="M210 10 V 160 H 300 "/> </svg>

Is there a simple CSS, SVG or javascript fix how to draw these paths (without recalculation of the overlapping regions and creating a new path)?

Answer 1

As I've commented you may add shape-rendering: crispEdges to path.p2

MDN Quote:

crispEdges Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.

 svg { outline:1px solid; } path.p2 { fill: none; stroke: black; stroke-width: 1px; shape-rendering: crispEdges; }

 <svg height="500" width="400"> <path class="p2" d="M210 10 V 100 H 300 "/> <path class="p2" d="M210 10 V 120 H 300 "/> <path class="p2" d="M210 10 V 140 H 300 "/> <path class="p2" d="M210 10 V 160 H 300 "/> </svg>