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

【问题标题】：Blurring borders in SVG (Raphael.js)SVG 中的模糊边界 (Raphael.js)
【发布时间】：2015-04-04 06:15:31
【问题描述】：

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

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

这里是例子。在我改变它的坐标之前的元素：

之后（每个末尾都有“.5”和整数大小）：

问题是如何强制 Raphael.js 清晰显示所有内容？

【问题讨论】：

您在哪个或哪些浏览器中看到这个？
此行为是设计使然。所以对于所有渲染 canvas 或 SVG!!! 的浏览器都是一样的

标签： javascript svg raphael

【解决方案1】：

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

.your_lines {
     shape-rendering: crispEdges;
}

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

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

【讨论】：

shape-rendering 在 IE 中不支持

【解决方案2】：

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

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

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

或通过包装：

函数 fiXY(x) { 返回 parseInt(x) + 0.5; } var rect = document.createElementNS(SVGobj.svgNS, "rect"); rect.setAttribute("x", fiXY(x)); rect.setAttribute("y", fiXY(y));

或通过：

SVG_Area.setAttribute("形状渲染", "crispEdges");

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

【讨论】：

【解决方案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

【讨论】：