使用 jQuery SVG 绘制网格会产生 2px 的线条而不是 1px答案

【问题标题】：Drawing grid with jQuery SVG produces 2px lines instead of 1px使用 jQuery SVG 绘制网格会产生 2px 的线条而不是 1px
【发布时间】：2015-01-30 03:51:59
【问题描述】：

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

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

【问题讨论】：

标签： svg

【解决方案1】：

解决问题的一种方法是在线条上应用一些 CSS：

.thelines{
    shape-rendering:crispEdges
}

The spec chapter on shape-rendering property.

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

但也许你最好坚持将 0.5 添加到线条的坐标上，因为浏览器会按照他们的要求做：线条在精确的坐标上，并且线条的两边都画了笔触，这里是半像素还有半个像素。

【讨论】：

这个可以，如果我能把AA关掉就可以解决问题了。
好的，这行得通，唯一的问题是，如果您将其称为 shapeRendering，则 jQuery SVG 样式设置不正确，就像他们在文档中提到的那样，它必须是形状渲染，否则不会不行。
当你将它设置为 DOM 对象属性时，我猜它必须是 shapeRendering：yourElement.style.shapeRendering = "crispEdges"，但在样式属性中它应该保留其原始名称。
shape-rendering 在 IE 中不受支持

【解决方案2】：

因此，您希望以锐利而不是模糊的边缘显示 1 个像素宽的水平和垂直线。

如果您的 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 解释，了解有关此常见问题的背景信息。

【讨论】：

setTimeout(function() { d3.selectAll('.cpu-statistics .c3-ygrid-lines .c3-ygrid-line') .attr('transform', function(d, i) { return 'translate(0.5,0.5)'; }); }, 300);

【解决方案3】：

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

例如对于全宽水平线：

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

每次完美的 1px 宽的线条。

【讨论】：