1

OK, so far I have this code:

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

But the line1 is not sharp at all. It looks like 2px wide instead of 1px as normal line . How can I reset it to 1px and set color of the line to white?

How can I get 1px line?

EDIT: seems like this problem with Firefox Line width in raphaeljswidth-in-raphaeljs I will try if it can be fixed using renderfix();

3
  • Do somebody know where should I put this code so it is working Paper.renderfix(); ? I have tried on the begining and at the end, but without any results. It is still blurry and not crisp.
    – Derfder
    Jul 24, 2012 at 11:33
  • renderfix is not working if I use it like paper1.renderfix();
    – Derfder
    Jul 24, 2012 at 11:38
  • I have to use 2.5 instead of 3 and then it works, however it is weird.
    – Derfder
    Jul 24, 2012 at 11:42

3 Answers 3

2

This question already discussed:

This links take you point what's going wrong with integer coordinates and why +0.5 was fixed edge blurring (with nice pictures!!):

You can avoid +0.5 by:

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

or by wrapper:

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

or by:

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

which effect on all shapes in you SVG image....

1
  • Setting the 'shape-rendering' attribute on the individual SVG nodes fixed the problem for me without affecting other elements that could benefit from anti-aliasing.
    – wasabi
    Oct 12, 2016 at 16:51
0

I have to use 2.5 instead of 3 and then it kinda works.

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

rather add it to fillerline for a reusable approach ....

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.