Line width in raphaeljs

问题

Is it real to make line with 1px weight in SVG or raphaeljs?

The follow code

 var p = Paper.path("M1 1 L50 1");
 p.attr("stroke", "#D7D7D7");
 p.attr("stroke-width", "1");
 p.attr("opacity", 0.5);

draw line which looks like 2px or 3px. Any alternative?

回答1:

When SVG lines lie at their apparently correct coordinates they actually lie inbetween pixels, so when you state M1 1 L50 1 it paints half a pixel on the top and the other half in the bottom of the pixel, making it look like a thick, semitransparent line.

To solve this problem you need to either paint at half pixels, or translate your elements half a pixel, ie. element.translate(0.5, 0.5)

You can see the blurry and sharp lines here: http://jsfiddle.net/k8AKy/

回答2:

You should also use the Paper.renderfix() function since you do not know which browser your users will be using.

From the documentation

Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant on other elements after reflow it could shift half pixel which cause for lines to lost their crispness. This method fixes the issue.

回答3:

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

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

Compare:

with +0.5:

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(SVGobj.svgNS, "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....

来源：https://stackoverflow.com/questions/8036519/line-width-in-raphaeljs

标签

svg

raphael