Размытые границы в SVG (Raphael.js)

Question

Я работаю над веб-редактором, где можно перетаскивать и изменять размеры элементов. У меня возникла проблема с отображением границ и элементов размером 1 пиксель: вместо отображения пиксель за пикселем (например, сплошная линия размером 1 пиксель) я получил размытую линию.

Я обнаружил, что если я использую координаты с .5 в конце (например, 10.5, 124.5) и целыми размерами, все будет идеально.

Вот примеры. Элемент до того, как я изменил его координаты:

И после (с ".5" в конце каждого и целым размером):

Вопрос в том, как заставить Raphael.js отображать все в четком виде?

Answer 1

Я не уверен, как это сделать в Рафаэле, но немного CSS может помочь вам:

.your_lines {
     shape-rendering: crispEdges;
}

По сути, он отключает сглаживание для линий, и линии, которые не являются горизонтальными или вертикальными, могут выглядеть не очень красиво.

Но, вероятно, вам лучше добавить .5 к координатам линий, потому что браузеры делают то, что им говорят: линия находится на точных координатах, а обводка нарисована по обе стороны от линии, здесь половина пикселя и полпикселя там.

Answer 2

По этой ссылке вы узнаете, что не так с целочисленными координатами и почему + 0.5 было исправлено размытие краев (с хорошими картинками !!):

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

Вы можете избежать + 0,5 по:

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

или по оболочке:

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

или:

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

, которые влияют на все фигуры в вашем SVG-изображении ....

Answer 3

Основываясь на ответе @ gavenkoa, вы можете сделать это с помощью Рафаэль :

var paper = Raphael('#container');
if (Raphael.svg) {
    paper.setViewBox(0.5, 0.5, paper.width, paper.height);
}

Обратите внимание, что отметка Raphael.svg, как следует, , а не , применяет сдвиг 0,5px к IE <= 8 (где используется VML). </p>