如何处理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;
}