Question

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

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

但是1号线根本不锋利。它看起来像2px宽而不是普通线的1px。如何将其重置为1px并将线条的颜色设置为白色？

如何获得1px线？

编辑：似乎这个问题与Firefox Line width in raphaeljs width-in-raphaeljs如果可以使用renderfix（）修复它我会尝试;

Answer 1

这个问题已经讨论过：

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

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

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

或通过包装：

function fiXY(x) { return 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("shape-rendering", "crispEdges");

对你SVG图像中的所有形状产生影响....

Answer 2

我必须使用2.5而不是3然后它才有用。

Answer 3

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

而是将其添加到填充线以获得可重复使用的方法....

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

3 个答案: