如何处理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正确。

Answer 2

仅尝试移动SVG元素。

svg {
  padding: .5px;
}