SVG 中的模糊边界 (Raphael.js)

Question

我正在开发一种基于网络的编辑器，可以在其中拖动元素并调整元素大小。我遇到了有关显示 1px 边框和元素的问题：我得到了一条模糊的线，而不是逐像素显示（例如 1px 实线）。

我发现如果我使用末尾带有 0.5 的坐标（例如 10.5、124.5）和整数大小，则一切都是像素完美的。

这是示例。我更改坐标之前的元素：

之后（每个末尾带有“.5”且为整数大小） ：

问题是如何强制 Raphael.js 以锐利方式显示所有内容？

Answer 1

我不知道如何在 Raphael 中执行此操作，但是一点点 CSS 可以帮助您：

.your_lines {
     shape-rendering: crispEdges;
}

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

但也许你最好坚持将 .5 添加到线条的坐标中，因为浏览器会按照它们的指示执行操作：线条位于精确的坐标上，并且描边绘制在线条的两侧，此处半像素，半像素那里。

Answer 2

此链接将带您指出整数坐标出了什么问题以及为什么 +0.5 是固定边缘模糊（带有漂亮的图片!!）：

• http://diveintohtml5.info/canvas.html#pixel-madness
• http://kilianvalkhof.com/2010/design/the-problem- with-svg-and-canvas/

你可以避免 +0.5 by:

SVG_Area.setAttribute("viewBox", "0.5 0.5 " + width + " " + height);

或 bywrapper:

function fiXY(x) { return parseInt(x) + 0.5; }

var rect = document.createElementNS(SVGobj.svgNS, "rect");
rect.setAttribute("x", fiXY(x));
rect.setAttribute("y", fiXY(y));

或 by:

SVG_Area.setAttribute("shape-rendering", "crispEdges");

这对 SVG 图像中的所有形状都有影响......

Answer 3

根据 @gavenkoa 的回答，您可以使用 Raphael 执行此操作：

var paper = Raphael('#container');
if (Raphael.svg) {
    paper.setViewBox(0.5, 0.5, paper.width, paper.height);
}

请注意 Raphael.svg 检查，因为您不应该不应用 0.5px 偏移至IE <=8（其中使用VML）。