svg - 如何处理SVG像素捕捉

Question

我正在尝试使用path元素渲染两条svg线。
第一行的宽度为1px，很清晰
第二行的宽度为2px，并且模糊
两者的笔划宽度相同。
如何解决这个问题

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <path style="stroke-width:1;stroke:red;opacity:1;" d="M  300.5  250 L  300.5 300 "></path>
 <path style=" stroke-width:1;stroke:red;opacity:1;" d="M  350    250 L  350  300  "></path> 
</svg>

Answer 1

主要是0.5偏移使线条清晰。 By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

因此，要修复第二行，请将坐标添加0.5或使用样式shape-rendering: crispEdges。请注意，crispEdges会防止抗锯齿，因此水平/垂直线较清晰，但斜角线看起来像是块状的。

同样，stroke-width = 1也不是有效的CSS语法。第一个示例stroke-width:1正确。