使用jQuery SVG绘制网格会产生2px的线条，而不是1px [英] Drawing grid with jQuery SVG produces 2px lines instead of 1px

问题描述

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

I know it's not the jQuery SVG library causing this issue, but when rendering horizontal or vertical SVG lines on integral x,y coordinates, lines are 2px wide instead of 1px. This is probably to do with anti-aliasing In order to get them fixed, and draw a line that's perfectly 1px wide, I need to adjust coordinates by adding 0.5px.

有没有一种方法可以使线宽达到1px，而不必像这样进行调整?

Is there a way to get lines 1px thick without having to tweak them like this?

推荐答案

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

A way to solve the problem is to apply some CSS to the lines:

.thelines{
    shape-rendering:crispEdges
}

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

基本上，它会关闭线条的抗锯齿功能，并且不是水平或垂直的直线看起来可能不会很漂亮.

Basically it turns off antialiasing for the lines, and the lines that are NOT straight horizontal or vertical may NOT look very pretty.

但是您可能最好坚持在行的坐标上添加.5，因为浏览器会执行以下操作:行位于精确的坐标上，笔划绘制在行的两边，此处为半像素还有一半像素.

But probably you'd better stick to adding .5 to the lines' coordinates, because browsers do what they are told to: the line is on exact coordinates and the stroke is painted on both sides of the line, half pixel here and half pixel there.

这篇关于使用jQuery SVG绘制网格会产生2px的线条，而不是1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！