title: Why do SVG lines/ paths on top of each other create a different stroke?
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/dgJiP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dgJiP.png" alt="enter image description here"></a></p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  path.p2 {
      fill: none;
      stroke: black;
      stroke-width: 1px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="500" width="400"&gt;
    &lt;path class="p2" d="M210 10 V 100 H 300 "/&gt;
    &lt;path class="p2" d="M210 10 V 120 H 300 "/&gt;
    &lt;path class="p2" d="M210 10 V 140 H 300 "/&gt;
    &lt;path class="p2" d="M210 10 V 160 H 300 "/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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)? </p>