Szerokość linii w raphaeljs

Question

Czy to prawda, aby linia z wagą 1px w SVG lub raphaeljs?

Kod obserwacji

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

linia remis, który wygląda 2px lub 3PX. Jakaś alternatywa?

Answer 1

Gdy linie SVG leżą na pozornie poprawnych współrzędnych, faktycznie leżą pomiędzy nimi, więc gdy podajesz M1 1 L50 1, tworzy on pół piksela na górze, a drugą połowę na dole piksela, dzięki czemu wygląda jak gruby, linia półprzezroczysta.

Aby rozwiązać ten problem, należy albo pomalować na pół piksela, albo przetłumaczyć elementy na pół piksela, czyli. element.translate(0.5, 0.5)

Można zobaczyć rozmyte i ostre linie tutaj: http://jsfiddle.net/k8AKy/

Answer 2

Należy również użyć funkcji Paper.renderfix() ponieważ nie wiem, która przeglądarka użytkownicy będą korzystać.

Z documentation

rozwiązuje problem z Firefox i IE9 dotyczące renderowania subpikseli. Jeśli papier po przepływie jest zależny od innych elementów, może przesunąć pół piksela, co spowoduje, że linie stracą swoją ostrość. Ta metoda rozwiązuje problem z .

Answer 3

Ten link przeniesie Cię wskazać, co się dzieje źle o współrzędnych całkowitych i dlaczego 0,5 została ustalona krawędź zacieranie (z ładnymi zdjęć !!):

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

Porównaj:

z 0,5:

Można uniknąć +0,5 przez:

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

lub przez owinięcie:

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

lub przez:

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

których wpływ na wszystkich kształtów w was SVG obrazu ....