为什么 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表示用户代理应尝试强调图稿干净边缘之间的对比，而不是渲染速度和几何精度。 为了获得清晰的边缘，用户代理可能会关闭所有直线和曲线的抗锯齿，或者可能只关闭接近垂直或水平的直线。 此外，用户代理可能会调整线位置和线宽以将边缘与设备像素对齐。

 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>