svg - 如何处理 SVG 像素捕捉

Question

我正在尝试使用路径元素渲染两条 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. 请注意，crisperEdges可防止抗锯齿，因此水平/垂直线条清晰，但有角度的线条看起来是块状的。

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

Answer 2

只需尝试移动 SVG 元素。

svg {
  padding: .5px;
}