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

Question

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

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

Answer 1

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

.thelines{
    shape-rendering:crispEdges
}

关于形状渲染属性的规范章节.

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

但是你可能最好坚持在线的坐标上添加.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解释,了解有关此常见问题的背景信息.