SVG中的边界模糊（Raphael.js）

Question

我正在开发一个基于Web的编辑器，用户可以拖动和调整元素大小。我遇到了一个关于显示1像素边框和元素的问题：与其一对一地显示（例如1像素实线），我得到了模糊的线条。

我发现如果我在坐标末尾使用.5（例如10.5，124.5）并使用整数大小，一切都是完美的像素。

以下是示例。我改变坐标之前的元素： 更改后（每个末尾都有“.5”和整数大小）： 问题是如何强制Raphael.js以清晰的方式显示所有内容？

- Grin

---

你在哪个浏览器或多个浏览器中看到这个问题？ - jbeard4

这种行为是按设计的。所以对于所有渲染canvas或SVG的浏览器都是一样的！ - gavenkoa

Answer 1

我不确定如何在Raphael中实现这个，但是一点点CSS可能会帮到你：

.your_lines {
     shape-rendering: crispEdges;
}

基本上，它关闭了线条的抗锯齿效果，而不是水平或垂直的线条可能看起来不太美观。

但是最好还是将0.5添加到线条的坐标中，因为浏览器会按照指示执行：线条位于精确坐标上，描边在线条的两侧绘制，这里半个像素，那里半个像素。

- Spadar Shut

---

shape-rendering 在 IE 中不被支持。 - smhg

Answer 2

这些链接可以帮助您了解整数坐标出现问题的原因，以及为什么要修复边缘模糊（附有漂亮的图片！）：

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

您可以通过以下方式避免使用+0.5：

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

或者通过包装器：

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));

或者使用以下方式：

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

这将影响您SVG图像中的所有形状...

- gavenkoa

Answer 3

根据@gavenkoa的答案，您可以使用Raphael来实现此功能：

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

请注意，Raphael.svg检查，因为您不应在使用VML的IE <= 8中应用0.5px偏移。

- smhg