Larghezza della linea in raphaeljs

Question

E 'reale fare linee con peso 1px in SVG o raphaeljs?

Il codice follow

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

draw line che assomiglia 2px o 3px. Qualche alternativa?

Answer 1

Quando le linee SVG si trovano alle loro coordinate apparentemente corrette, in realtà si trovano tra i pixel, quindi quando si specifica M1 1 L50 1 si dipinge mezzo pixel in alto e l'altra metà nella parte inferiore del pixel, rendendolo simile a uno spesso, linea semitrasparente.

Per risolvere questo problema è necessario dipingere a metà pixel o tradurre i propri elementi mezzo pixel, ad es. element.translate(0.5, 0.5)

È possibile vedere le linee sfocate e nitide qui: http://jsfiddle.net/k8AKy/

Answer 2

Si dovrebbe anche usare la funzione Paper.renderfix() dal momento che non si sa quale browser tuoi utenti utilizzeranno.

Dalle documentation

risolve il problema di Firefox e IE9 per quanto riguarda il rendering subpixel. Se la carta dipende da altri elementi dopo il riflusso, potrebbe spostare metà dei pixel che causano la perdita di nitidezza delle linee. Questo metodo corregge il problema con .

Answer 3

Questo link prendono si punta cosa sta andando male con coordinate intere e perché 0,5 è stato fissato bordo sfocatura (con belle immagini !!):

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

Confrontare:

con +0,5:

si può evitare +0,5 da:

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

o con avvolgitore:

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

o da:

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

che effetto su tutte le forme che un'immagine SVG in ....