javascript - Raphael 中线条路径的宽度是 2px 而不是 1px

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

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

如何得到 1px 的线？

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

Answer 1

这个问题已经讨论过了:

• > Line width in raphaeljs
• > Blurring borders in SVG (Raphael.js)

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

• > 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("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", fiXY(x));
rect.setAttribute("y", fiXY(y));

或通过:

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

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