如何处理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偏移使线条清晰.默认情况下,整数坐标映射到像素方块的交叉点.因此,宽度为1的水平/垂直线以像素行之间的边界为中心,并且在两侧的像素中间延伸一半.

所以要修复第二行,要么在坐标上加0.5,要么使用样式shape-rendering: crispEdges.请注意,crispEdges可防止抗锯齿,因此水平/垂直线条清晰但有角度的线条看起来很块.

stroke-width = 1也是无效的CSS语法.第一个示例stroke-width:1正确.