Ancho de línea en raphaeljs

Question

¿Es real hacer una línea con 1px de peso en SVG o raphaeljs?

El código de seguimiento

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

línea de drenaje que se parece a 2px o 3px. ¿Alguna alternativa?

Answer 1

Cuando las líneas SVG se encuentran en sus coordenadas aparentemente correctas, en realidad se encuentran entre los píxeles, por lo que cuando declaras M1 1 L50 1 pinta medio píxel en la parte superior y la otra mitad en la parte inferior del píxel, lo que lo hace grueso. línea semitransparente.

Para resolver este problema, necesita pintar a la mitad de píxeles, o traducir sus elementos medio píxel, es decir. element.translate(0.5, 0.5)

Puede ver las líneas borrosas y nítidas aquí: http://jsfiddle.net/k8AKy/

Answer 2

También debe utilizar la función Paper.renderfix() ya que no sabe qué navegador sus usuarios van a utilizar.

De los documentation

soluciona el problema de Firefox y IE9 con respecto a la representación de subpíxeles. Si el papel depende de otros elementos después del reflujo, podría desplazar la mitad de píxeles, lo que provocaría que las líneas pierdan su nitidez. Este método corrige el problema con .

Answer 3

Estos links toman apuntar lo que va mal con coordenadas enteras y por qué 0,5 se fija borde borrosa (con bonitas imágenes !!):

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

Comparar:

con 0,5:

Usted puede evitar 0,5 por:

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

o envoltorio:

 
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 por:

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

cuales efecto en todas las formas que la imagen SVG en ....