使用jQuery SVG绘制网格可生成2px行而不是1px

Question

我知道这不是导致此问题的jQuery SVG库，但是当在整数x，y坐标上渲染水平或垂直SVG线时，线宽为2px而不是1px。这可能与抗锯齿有关为了使它们固定，并绘制一条完全1px宽的线，我需要通过添加0.5px来调整坐标。

有没有办法让线条1px厚，而不必像这样调整它们？

Answer 1

解决问题的方法是在行中应用一些CSS：

.thelines{
    shape-rendering:crispEdges
}

The spec chapter on shape-rendering property.

基本上它会关闭线条的抗锯齿，而不是直线水平或垂直的线条可能看起来不太漂亮。

但是你可能最好坚持在线的坐标上添加.5，因为浏览器会按照它们的要求进行操作：线条位于精确坐标上，线条两边都画有笔画，这里半像素那里有一半像素。

Answer 2

因此，您希望一条像素宽的水平和垂直线条以清晰而非模糊的边缘显示。

如果 SVG中的所有坐标都是整数，也许你可以使用变换元素将整个图像偏移0.5：

// first group has no transform 
// lines appear blurred, because they are centered on boundary of two pixels
<g id = "blurred">  
    <line x1="10" y1="10" x2="110" y2="10" stroke="black" stroke-width="1"/>
    <line x1="10" y1="10" x2="10" y2="100" stroke="black" stroke-width="1"/>
</g>

    // second group has half pixel transform - 
    // lines will appear sharp because they are translated to a pixel centre
    <g id="sharp" transform="translate(0.5,0.5)">
    <line x1="120" y1="10" x2="220" y2="10" stroke="black" stroke-width="1"/>
    <line x1="120" y1="10" x2="120" y2="100" stroke="black" stroke-width="1"/>
</g>

但这不适用于未使用整数坐标定义的水平/垂直线，或者其他转换将其移出整数坐标。

因此，如果这个想法无法用于解决您的问题，那么您可能需要一种“像素捕捉”技术。这将在绘制之前分析一条线。如果直线是垂直的或水平的（转换后），则需要调整坐标，使它们最终在转换后的像素中心。

您可能有兴趣查看有关此常见问题的背景信息的WPF Pixel Snapping说明。

Answer 3

只需使用带填充的1px宽矩形（当然只适用于水平/垂直线）。

e.g。对于全宽水平线：

<rect x="0" y="0" width="100%" height="1" fill="#c2c2c2"></rect>

每次完美的1px宽线。