Raphael 中线路径的宽度是 2px 而不是 1px答案

【问题标题】：Width of the line path in Raphael is 2px instead of 1pxRaphael 中线路径的宽度是 2px 而不是 1px
【发布时间】：2013-01-28 20:23:30
【问题描述】：

好的，到目前为止我有这个代码：

var fillerLine = {
                            'color': 'white',
                            'cursor': 'pointer'
                        }

                        var line1 = paper1.path("M2 2");
                        line1.attr(fillerLine);
                        var anim = Raphael.animation({path: "M2 2L100 2"}, 500);
                        line1.animate(anim.delay(3000));

但是 line1 一点也不尖锐。它看起来像 2px 宽而不是 1px 作为正常线。如何将其重置为 1px 并将线条颜色设置为白色？

我怎样才能得到1px的线？

编辑：Firefox Line width in raphaeljswidth-in-raphaeljs 似乎有这个问题我会尝试使用 renderfix() 修复它；

【问题讨论】：

有人知道我应该把这段代码放在哪里，这样它才能工作 Paper.renderfix(); ?我在开始和结束时都尝试过，但没有任何结果。它仍然模糊不清。
如果我像 paper1.renderfix() 一样使用它，renderfix 将不起作用；
我必须使用 2.5 而不是 3，然后它才能工作，但这很奇怪。

标签： javascript raphael

【解决方案1】：

这个问题已经讨论过了：

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

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

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

或通过包装：

函数 fiXY(x) { 返回 parseInt(x) + 0.5; } var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", fiXY(x)); rect.setAttribute("y", fiXY(y));

或通过：

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

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

【讨论】：

在单个 SVG 节点上设置“shape-rendering”属性为我解决了这个问题，而不会影响其他可以从抗锯齿中受益的元素。

【解决方案2】：

我必须使用 2.5 而不是 3，然后它就可以工作了。

【讨论】：

【解决方案3】：

line1.attr({'stroke-width':'1'});

宁可将其添加到填充线以获得可重用的方法....

【讨论】：