拉斐尔的线条路径宽度是2px，而不是1px

Width of the line path in Raphael is 2px instead of 1px

本文关键字：2px 1px 路径      更新时间：2024-01-18

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

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号线一点也不锋利。它看起来像2倍宽，而不是1倍作为法线。如何将其重置为1px并将线条的颜色设置为白色？

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

EDIT：看起来这个问题与Firefox的线宽有关。在raphaeljs中的宽度。我会尝试是否可以使用renderfix（）修复它

这个问题已经讨论过了：

  • 拉斐尔字体中的线宽
  • SVG中模糊的边界（Raphael.js）

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

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

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

SVG_Area.setAttribute（"viewBox"，"0.5 0.5"+宽度+"+高度）；

或通过包装：

函数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（"形状渲染"、"cripEdges"）；

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

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

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

而是将其添加到fillerline中以获得可重用的方法。。。。

相关文章：