为什么SVG线/路径彼此重叠会产生不同的笔划？

Question

我正在绘制一些具有相同笔画的路径，并且有一些明显的重叠（动态创建和更新树）。在重叠区域上，笔划看起来与非重叠区域上的笔画不同（较暗-参见a）（参见b）。同样的效果在不同的笔触颜色下也很明显。

代码如下：

  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>

是否有一个简单的CSS，SVG或javascript修复了如何绘制这些路径（无需重新计算重叠区域并创建新路径）？

Answer 1

正如我评论的那样，您可以将shape-rendering: crispEdges添加到path.p2

MDN报价：

  

crispEdges （指示边缘）指示用户代理应尝试强调图稿的干净边缘在渲染速度和几何精度上的对比度。为了获得清晰的边缘，用户代理可以关闭所有线条和曲线的抗锯齿功能，或者可能仅关闭接近垂直或水平方向的直线的抗锯齿功能。另外，用户代理可能会调整线的位置和线的宽度，以使边缘与设备像素对齐。

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>