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

Question

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

代码如下：

  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 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>

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

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

javascript

svg

antialiasing

stroke