如何处理SVG像素对齐问题

Question

我正在尝试使用path元素渲染两条svg线。 第一条线宽度为1像素，非常清晰。 第二条线宽度为2像素，模糊。
两条线的stroke-width相同。 如何修复这个问题？

<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>

- user2503251

Answer 1

主要是0.5的偏移让线条变得锐利。默认情况下，整数坐标映射到像素方格的交点。因此，宽度为1的水平/垂直线居中于像素行之间的边界上，并向两侧的像素延伸一半。 因此，要修复第二行，可以将坐标加上0.5或使用样式shape-rendering：crispEdges。请注意，crispEdges会防止抗锯齿，因此水平/垂直线条很清晰，但倾斜的线条则看起来有点块状。

此外，stroke-width = 1不是有效的CSS语法。第一个例子stroke-width: 1写得对。

- Robert Longson

---

非常感谢，我已经更正了 CSS 语法。它是错误添加的。你给我的解决方案对我很有效。如果我把这些线条倾斜一些角度，在使用 crispEdges 后，它们看起来不太平滑，看起来像是在线条上有一些阶梯。你有什么解决方案吗？我需要线条即使在旋转或倾斜时也要保持平滑和锐利。你能回答我这个问题吗？http://stackoverflow.com/questions/17203352/div-within-svg-foreign-object-tag-is-not-transforming-when-it-has-an-opacity-0 - user2503251

Answer 2

尝试移动SVG元素。

svg {
  padding: .5px;
}

- VitalickS