CODEWITHSUNDEEP
javascriptraphael
Derfder
Derfder

Reputation: 3324

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

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

Upvotes: 1

Views: 1648

Answers (3)

gavenkoa
gavenkoa

Reputation: 48753

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....

Upvotes: 2

Aukhan
Aukhan

Reputation: 481

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

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

Upvotes: 0

Derfder
Derfder

Reputation: 3324

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

Upvotes: 0

Related Questions